1

Although I have seen similar questions, none seem to address my situation.

I am migrating MUI v4 to MUI v5, and I've had a love of cases in which a particular style comes externally. For example, this is what it would look like using makeStyles:


const useStyles = makeStyles((theme) => {
  typographyRoot: ({ color }) => ({
    padding: theme.spacing(1),
    color
  })
})

const Example = ({ color }) => {
  const classes = useStyles({ color })
  return (
    <Typography variant="body1" classes={{ root: classes.typographyRoot }}>
      Some example
    </Typography>
  )
}

Now I am attempting to do this using styled components, how would I pass in the color prop as I did in the useStyles?

Here is what I currently have:

const StyledTypography = styled(Typography)(({ theme }) => ({
  padding: theme.spacing(1),
  color // how to pass in color in this styled component
}))

const Example = ({ color }) => {
  return (
    <StyledTypography variant="body1">
      Some example
    </StyledTypography>
  )
}

Suppose I could wrap the StyledComponent in a function and pass it in there, but I feel like there must be a more appropriate way to do so. Specifically:

const getStyledTypography = (color) => styled(Typography)(({ theme }) => ({
  padding: theme.spacing(1),
  color
}))

const Example = ({ color }) => {
  const StyledTypography = getStyledTypography(color)
  return (
    <StyledTypography variant="body1">
      Some example
    </StyledTypography>
  )
}

Anyway, what is the proper way to pass in extra props into a styled component in this fashion?

theJuls
  • 6,788
  • 14
  • 73
  • 160

1 Answers1

1

It should be passed as prop.

<StyledTypography variant="body1" color={'red'}>
      Some example
    </StyledTypography>

const StyledTypography = styled(Typography, {
     shouldFrowardProp:(prop) => prop !== 'color'
})(({ theme, color }) => ({
  padding: theme.spacing(1),
  color: color
}))

Use shouldForwardProp to not pass the prop to the dom element.

Георги Кръстев
  • 328
  • 1
  • 9
  • Although that does works for passing in the prop, the second parameter does not work. According to the styled function definition, it does indeed just have one parameter, which is the component. This is obviously causing a bunch of warnings about the props hitting the DOM element :( Any other ideas on how to stop those? – theJuls Mar 09 '22 at 22:34
  • With that being said, this does indeed answer the original question :) Thanks! – theJuls Mar 09 '22 at 22:35