网站搜索

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