React Material UI v5 样式为 TypeScript

Question

Styled typography accepts all the default typography props. When I add <ExtraProps> between styled() and the style, it also accepts extra props.

const StyledTypography = styled(Typography)<ExtraProps>({})

My question is: when I render the styled typography component with prop "component" or "as" it does not accept the dynamic component props.

example:

<StyledTypography component={Link} to="/test">demo</StyledTypography>

(Link is from react-router-dom)

It can not find the prop "to" that comes from "Link" component and that makes error. The default Typography accepts component argument Typography<Link>, but the one that extends the default Typography with styled does not.

How to make the styled component accept the new props that come from the dynamic component.

(I know that prop as={(props) => <Link to="/test" {...props} /> works, but I do not want it to be like this. It has to be as={Link} and to="/test")

Answer 1

This

styled(Typography)({}) as typeof Typography | FC<ExtraProps>

or this

const StyledTypography: (typeof Typography | FC<ExtraProps>) = styled....

works fine.

But it does not feel like the best answer. There should be a better one

Answer 2

Try something like this, make some state="boolean" then try passing the prop down to your styled component.

const [toogle, seToggle] = useState(flase);

const StyledTypography = styled(Typography)({

background-color: ${(props) =>

   (props?.cardToggle ? 'lightgrey' : 'white')};

})`

<StyledTypography onclick={()=> setToggle(!toggle)} toggle={toggle} component={Link} to="/test">demo</StyledTypography>