reactjs - 使用 react 将 Emotion 属性转换为样式对象时出现错误
这基本上是对这里给出的答案的一个后续问题。在那个问题中,我问了一些内容以便使条件样式更容易。而那里给出的解决方案似乎是将属性传递给样式定义。
现在我在以下意义上使用它:
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>
}
不过这给了我两个错误,首先在加载时出现以下错误:
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()}.
我注意到这个错误是由于样式“折叠”到 div 组件中而发生的。这是否意味着前面提到的问题中的解决方案不起作用?或者这是来自 React 的“假阳性”,有没有办法隐藏这个错误/警告?
其次,通常在创建此类样式对象时,我可以省略 theme 属性,它会被 Material UI 隐式提供。但是一旦我添加了这个额外的属性,TypeScript 就无法编译,并且会给出以下错误:
TS2741: Property 'theme' is missing in type '{ children: Element; noheader: true; }' but required in type '{ theme: Theme; noheader: boolean; }'.