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"
})(({ 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"
})<{ 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.

@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 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.

@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.

@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.

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

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