-
-
Notifications
You must be signed in to change notification settings - Fork 32.2k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[docs] Migrate Card demos to emotion #25557
[docs] Migrate Card demos to emotion #25557
Conversation
@oliviertassinari For the example Complex Interaction use the same technique applied for one of the examples of
I wonder if this approach is the correct one to tackle these cases? And why in this scenario does this error occur? I tried in different ways but it always ended with the warning in the console. UPDATE Reviewing the |
@vicasas we should prevent the prop to be spread on the DOM node in this case. |
@vicasas I have pushed a few commits on side improvements I could notice. If you could fix the leaking prop, I think that it will be perfect, we could move forward with the changes. |
@oliviertassinari I have 3 options to address these cases:
interface ExpandMoreProps extends IconButtonProps {
expand: boolean;
}
const ExpandMore = styled((props: ExpandMoreProps) => {
const { expand, ...rest } = props; // unstructuring the props so as not to send the `expand` prop to the DOM node
return <IconButton {...rest} />;
})(({ theme, expand }) => ({
transform: !expand ? 'rotate(0deg)' : 'rotate(180deg)',
marginLeft: 'auto',
transition: theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest,
}),
}));
sx={{
transform: !expanded ? 'rotate(0deg)' : 'rotate(180deg)',
marginLeft: 'auto',
transition: (theme) =>
theme.transitions.create('transform', {
duration: theme.transitions.duration.shortest,
}),
}}
I certainly liked the previous approach using What do you think? |
@vicasas I guess 1 is good enough? |
@oliviertassinari Exactly, I still lean towards 1. The only noise it makes is to leave the prop unused in the destructuring, in eslint rules it can give problems for having an unused prop Finally each developer will choose their way of approaching this, but I think it is good to guide them to use option 1. |
Related to #16947