是否可以将道具传递给 mui styled() 组件？

Question

Is it possible to pass default props to a style component? For example, I want to make a component with using Typography from mui.

const H1Typography = (props) => (
  <Typography variant='h1' sx={{fontWeight: 500}}>{props.children}</Typography>
)

. How can I add variant props into the below mui styled component?

const H1Typography = styled(Typography)(({theme}) => ({
  fontWeight: 500
}))

https://mui.com/system/styled/

Answer 1

You can pass it like you pass theme, but if you use a boolean prop you will receive an error.

const H1Typography = styled(Typography)(({theme, huge}) => ({fontWeight: 500,fontSize: huge === "true" ? "4rem" : "1rem"}))

Note, that I pass the huge prop as a string.