#Storybook v7 doesn't recognize custom MUI theme color?

1 messages · Page 1 of 1 (latest)

cinder marsh
#

I get "Cannot read properties of undefined (reading 'Gray500')" for trying to access a custom MUI theme color in a component that is rendered in a story. I'm pretty new to SB

1.png 2.png 3.png
nimble blaze
#

Do you have your theme defined/imported in preview.js?

cinder marsh
#

Hmm, no

#

Do I use something like this before/after the parameters constant?

import { CssBaseline, ThemeProvider } from "@mui/material";
import { darkTheme } from "../src/themes/dark.theme";

/* snipped for brevity */

export const withMuiTheme = (Story) => (
  <ThemeProvider theme={darkTheme}>
    <CssBaseline />
    <Story />
  </ThemeProvider>
);

export const decorators = [withMuiTheme];
cinder marsh
#

Ok I think I managed it, hope it doesn't break. Thank you very much for the hint!

nimble blaze
#

@sterile sedge is putting together some guides of how to do this kind of thing I think. Hopefully it will be easier in the future

sterile sedge
#

Hey @cinder marsh How's it going?

#

Looks like you've got it working now

cinder marsh
#

Yeah, seems about right, no?

image.png
#

If you have a tip on how to tidy it up, it's welcome

sterile sedge
#

Just in case you want it, I just released an addon that will clean things up a bit for you 😄

cinder marsh
#

Hmm, looks interesting, that would be the tidier way basically

sterile sedge
#

Absolutely 🙂

cinder marsh
#

I will try it out 🙂

nimble blaze
#

We've gotta get the word out on this addon...

cinder marsh
#

Since you're here, allow to me make a quick question. As far as I understood SB uses as controls whatever it finds in the interface/type of the props of the component it renders. Is there a better way of only having it include into the controls the args that you specify other than adding this into the meta?

image.png
sterile sedge
cinder marsh
#

Ideally it would only use the args that you specify as controls, with some sort of parameter that takes a boolean in case you want it to use everything else it finds as well

sterile sedge
#

That's a great question, Peter! Right now, I don't think that there is but I can see why that would be useful 🤔

cinder marsh
#

According to chatGPT, the last version it knew (6.1) did exactly that. Maybe without that parameter I mentioned, but it only used the args you provided as controls

sterile sedge
#

or maybe something like:

parameters: {
  controls: {
    include: 'argsOnly',
  }
}
cinder marsh
#

That looks great

#

It actually didn't do anything

sterile sedge
#

Right, sorry I was proposing what it would look like if what you suggested existed

cinder marsh
#

Ahh, right, yeah, something like that

#

Ok, so for now the regex is my best bet?

sterile sedge
#

I believe so

cinder marsh
#

Ok, thank you very much, I'll give the addon a try too!

sterile sedge
#

hmmmmm actually

#

So how about this...

# 
const Stepper = Template.bind({});
Stepper.args = {
  step: 1,
  someProp: '',
}
Stepper.parameters = {
  // Will only include controls for "step" and "someProp"
  controls: { include: Object.keys(Stepper.args) }
}
cinder marsh
#

Hmm, is that applicable for v7?

sterile sedge
#

It should do