Skip to content

Instantly share code, notes, and snippets.

@onmotion
Last active June 7, 2022 12:14
Show Gist options
  • Save onmotion/d8e0b28878b95723b0de2f444b4feafe to your computer and use it in GitHub Desktop.
Save onmotion/d8e0b28878b95723b0de2f444b4feafe to your computer and use it in GitHub Desktop.
MUI TS styled component add props
export const CssTextField = styled(TextField, {
shouldForwardProp: (prop) => prop !== "resize",
})<{ resize?: boolean }>(({ theme, resize }) => {
console.log({ resize });
return {
root: {
"& label.Mui-focused": {
color: theme.palette.primary.light,
},
},
};
});
const StyledComp = styled("div", {
shouldForwardProp: (prop) => prop !== "color" && prop !== 'myProp',
})<{ myProp?: boolean; color?: string }>(({ theme, myProp, color }) => ({
backgroundColor: myProp ? "aliceblue" : "red",
color,
padding: theme.spacing(1)
}));
<StyledComp myProp color="red" /> // typed safe
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment