MUI 5 `styled()` pass props along with theme object #29207

lougroshek · 2021-10-21T15:50:30Z

Based on MUI's documentation of the styled() utility, the theme is provided for styling directly attached to the component, but props are supposed to be handled only within the overridesResolver option. If this is used for large applications, it means that any theming based on conditional logic has to be lifted up into the theme. Potential disadvantages/deleterious effects on developer experience:

Extremely large theme files
Theming split between custom components and theme

The legacy makeStyles utility allowed props to be passed along with the theme, and I don't understand why that is not also offered here. It is possible to create an intermediary component as a workaround, but that is extra work and code. Why is there a forwardProps option but no way to get props available to the local theming rules? If this is what we should be doing in this case it should probably be documented because at present, given how opinionated MUI is, it feels like a hack.

Workaround

const MyStyledComponent = ({myProp, children}) => {

  const StyledEl = styled('div')(({ theme }) => ({
    backgroundColor: myProp ? 'aliceblue' : 'red',
    padding: theme.spacing(1),
  }));

  return StyledEl;
}

I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

Ability to pass props in with theme. Allows to keep all styles in one place for a custom component, rather than lifting up to theme and potentially creating an unwieldy large theme file or splitting styling rules for a single component into multiple places.

const StyledComp = styled('div', {themeProps: props})(({ theme, props }) => ({
    backgroundColor: props.myProp ? 'aliceblue' : 'red',
    padding: theme.spacing(1),
 }));

Motivation 🔦

Use MUI components and v5 theming solution without splitting styling rules into multiple places or creating a huge theme file.

The text was updated successfully, but these errors were encountered:

siriwatknp · 2021-10-22T04:46:21Z

You don't need to create an intermediate component to pass your custom props. You can do:

JS

const StyledComp = styled("div", {
  shouldForwardProp: (prop) => prop !== "color" && prop !== 'myProp',
})(({ theme, myProp, color }) => ({
  backgroundColor: myProp ? "aliceblue" : "red",
  color,
  padding: theme.spacing(1)
}));

<StyledComp myProp color="red" />

TS

const StyledComp = styled("div", {
  shouldForwardProp: (prop) => prop !== "color" && prop !== 'myProp',
})<{ myProp?: boolean; color?: string }>(({ theme, myProp, color }) => ({
  backgroundColor: myProp ? "aliceblue" : "red",
  color,
  padding: theme.spacing(1)
}));

<StyledComp myProp color="red" /> // typed safe

https://codesandbox.io/s/basicbuttons-material-demo-forked-7vs5v?file=/demo.tsx

Note: for some props, you have to define shouldForwardProps to the styled options so that the custom props are not spread to DOM.

lougroshek · 2021-10-22T11:07:49Z

@siriwatknp Your solution is in typescript. My original example that I linked to, as well as my code sample, is not in typescript. Is the actual solution you are proposing "switch your entire project to typescript"? Not everyone is using typescript. If you're telling me to do that you haven't addressed my initial question, much less triaged. If MUI should only be used with typescript it should say so in the docs.

siriwatknp · 2021-10-22T14:27:05Z

@siriwatknp Your solution is in typescript. My original example that I linked to, as well as my code sample, is not in typescript. Is the actual solution you are proposing "switch your entire project to typescript"? Not everyone is using typescript. If you're telling me to do that you haven't addressed my initial question, much less triaged. If MUI should only be used with typescript it should say so in the docs.

I have included JS example in my response. Please check it again if that works for you.

lougroshek · 2021-10-22T14:36:29Z

@siriwatknp Much appreciated! I had found the ts demo you linked to previously but wasn't clear how that looked in JS, and in fact I was getting eslint errors to do with type definition when I tried. Is there any possibility of making this clearer in the docs? I am happy to pursue that myself if that's an option.

RookTKO · 2021-10-26T14:52:32Z

@siriwatknp Much appreciated! I had found the ts demo you linked to previously but wasn't clear how that looked in JS, and in fact I was getting eslint errors to do with type definition when I tried. Is there any possibility of making this clearer in the docs? I am happy to pursue that myself if that's an option.

I second this. It really wasn't very clear in the documentation to me as how to get that to work but the example above produced a-lot of clarity. If @lougroshek doesn't have time I would be more then happy to submit the update.

siriwatknp · 2021-10-27T02:24:49Z

@lougroshek @RookTKO What do you think about adding the info to this page?

Feel free to submit a PR if you'd like.

RookTKO · 2021-10-27T14:31:24Z

@siriwatknp sure, I'll write it up in a few and submit it to get looked over, thanks! I'd appreciate if you could assign it to me in the mean time.

timleppard · 2021-10-29T12:08:27Z

@siriwatknp your StyledComp example above is a little broken because myProp gets forwarded to the div. This is a result of the inconsistency with emotion styled() outlined in #29320 which I think was closed prematurely.

minervabot · 2021-10-30T01:22:57Z

@timleppard Yes, this is exactly what I was doing when I encountered the issue!

siriwatknp · 2021-10-31T06:52:50Z

@siriwatknp your StyledComp example above is a little broken because myProp gets forwarded to the div. This is a result of the inconsistency with emotion styled() outlined in #29320 which I think was closed prematurely.

Thanks for your feedback, I have updated my example. I have reopened #29320.

farmstrong8 · 2021-10-31T18:42:51Z

@siriwatknp when overriding a component in the same way as overriding a JSX element the type is getting cast to never any ideas?

siriwatknp · 2021-11-01T02:54:48Z

@siriwatknp when overriding a component in the same way as overriding a JSX element the type is getting messed cast to never any ideas?

I guess it is the variant prop that causes the Card type to behave differently. Internally, Card inherits Paper that contains variant prop. Can you try using a different name like that is not variant.

If it does not work, please open a new issue with reproduction.

sudofix · 2021-11-02T20:44:15Z

@siriwatknp when overriding a component in the same way as overriding a JSX element the type is getting messed cast to never any ideas?

I guess it is the variant prop that causes the Card type to behave differently. Internally, Card inherits Paper that contains variant prop. Can you try using a different name like that is not variant.

If it does not work, please open a new issue with reproduction.

thanks for this, i had the same problem and this turned out to be why

lougroshek added the status: needs triage label Oct 21, 2021

siriwatknp added question and removed status: needs triage labels Oct 22, 2021

siriwatknp added docs good first issue and removed question labels Oct 27, 2021

mui-org / material-ui Public

MUI 5 `styled()` pass props along with theme object #29207

MUI 5 `styled()` pass props along with theme object #29207

lougroshek commented Oct 21, 2021

siriwatknp commented Oct 22, 2021 •

edited

lougroshek commented Oct 22, 2021

siriwatknp commented Oct 22, 2021

lougroshek commented Oct 22, 2021

RookTKO commented Oct 26, 2021

siriwatknp commented Oct 27, 2021 •

edited

RookTKO commented Oct 27, 2021 •

edited

timleppard commented Oct 29, 2021 •

edited

minervabot commented Oct 30, 2021

siriwatknp commented Oct 31, 2021

farmstrong8 commented Oct 31, 2021 •

edited

siriwatknp commented Nov 1, 2021

sudofix commented Nov 2, 2021

mui-org / material-ui Public

MUI 5 styled() pass props along with theme object #29207

MUI 5 styled() pass props along with theme object #29207

Comments

lougroshek commented Oct 21, 2021

Workaround

Summary 💡

Motivation 🔦

siriwatknp commented Oct 22, 2021 • edited

lougroshek commented Oct 22, 2021

siriwatknp commented Oct 22, 2021

lougroshek commented Oct 22, 2021

RookTKO commented Oct 26, 2021

siriwatknp commented Oct 27, 2021 • edited

RookTKO commented Oct 27, 2021 • edited

timleppard commented Oct 29, 2021 • edited

minervabot commented Oct 30, 2021

siriwatknp commented Oct 31, 2021

farmstrong8 commented Oct 31, 2021 • edited

siriwatknp commented Nov 1, 2021

sudofix commented Nov 2, 2021

MUI 5 `styled()` pass props along with theme object #29207

MUI 5 `styled()` pass props along with theme object #29207

siriwatknp commented Oct 22, 2021 •

edited

siriwatknp commented Oct 27, 2021 •

edited

RookTKO commented Oct 27, 2021 •

edited

timleppard commented Oct 29, 2021 •

edited

farmstrong8 commented Oct 31, 2021 •

edited