This is basically a follow up problem from the answer given here. In that question I ask something to make conditional styling easier. And the solution given there seems to be to pass the properites to the style definition.
Now I use that in the following sense:
import {Paper, useTheme, Theme} from "@mui/material";
export const StyledInsidePaperDiv = styled('div')(({theme, noheader}: {theme: Theme, noheader: boolean}) => css`
padding: ${theme.spacing(2)};
padding-top: ${theme.spacing(noheader ? 2 : 0.25)};
${theme.breakpoints.down('sm')} {
padding-left: ${theme.spacing(1)};
padding-right: ${theme.spacing(1)};
}
`);
export function MyPaper() {
const theme = useTheme();
return <Paper>
<StyledInsidePaper theme={theme} noheader={true}>
inside
</StyledInsidePaper>
</Paper>
}
This gives me two errors though, first of all as is the following error happens on loading:
Warning: Received `true` for a non-boolean attribute `noheader`. If you want to write it to the DOM, pass a string instead: noheader="true" or noheader={value.toString()}.
I notice this error happens due to the style "collapsing" into a div component. Does that mean that the solution in aformented question not work? Or is this a "false positive" from react and is there a way to hide this error/warning?
Secondly normally when creating such style objects I can omit the theme property and it's implicitly provided by material ui. However once I add this extra property typescript won't compile anymore and gives this error:
TS2741: Property 'theme' is missing in type '{ children: Element; noheader: true; }' but required in type '{ theme: Theme; noheader: boolean; }'.