Emotion properties to style object with react gives an error

Viewed 62

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; }'.
0 Answers
Related