reactjs - 在 styled component 中使用 props 时工作正常，但显示警告（Warning: Received `true` for a non-boolean attribute `cen` ）

警告：接收到非布尔属性 "cen" 的 "true"。如果你想将其写入 DOM，请传递一个字符串：cen="true" 或 cen={value.toString()}。 当我在 Styled-Component 中使用带有 TypeScript 和 Material-UI 的 Props 时，它能正常工作，但会显示警告

import React from 'react'  
import styled from 'styled-components';
import { Button } from '@material-ui/core';

interface Cnt {
  cen?: boolean
}
const Bnt3 = styled(Button)`
&&{
  ${(props:Cnt) => props.cen && 'display: block;'}
  margin: 30px auto;
  border-radius: 24px;
  padding: 8px 28px;
}
`
const Test: React.FC = () => {
  return (
    <>
    <Bnt3 cen variant="contained" type="button" color="secondary" >Log In</Bnt3>
    <Bnt3 variant="contained" type="button" color="secondary">Log In</Bnt3>
    </>
  ); 
}
export default Test;

答案＃1

这是你分享的完整代码的演示：demo

它没有显示任何警告。你分享的代码中还有什么可能缺失的吗？

一般来说，这就是你收到此类警告的原因：HTML 属性警告

如果你看到这个警告，你可能传递了 true，而实际上应该使用 "true"。这很可能来自于 .attrs 属性，或者来自你传递给 styled(Component) 组件的一个完全无关的 prop。

更新：

不幸的是，正是 @material-ui/core 将所有无法识别的属性传递给 HTML。由于 cen 无法识别，它会被传递到 HTML，并且只能以字符串值的形式写入 HTML，因此导致了错误。你可以像错误提示的那样使用字符串形式的 "true" 或 "false"，或者另一种方法是通过使用 styled-components 的 css 属性，将自定义属性与其他属性分开。以这种方式重写组件：

const StyledButton = ({ cen, ...props }) => {
  return (
    <Button
      css={`
        && {
            ${cen && 'display: block;'}
            margin: 30px auto;
            border-radius: 24px;
            padding: 8px 28px;
          }
      `}
      {...props}
    />
  )
}

这样你就可以阻止自定义属性向下传递到组件树中。

这里有几篇官方文章可以查看，如果你还不知道如何在 styled-components 中设置 css 属性。

• 手动设置
• 用于 create-react-app

答案＃2

这是一种数据类型错误！所以我尝试用字符串类型而不是布尔类型来修复。

import React from 'react'  
import styled from 'styled-components';
import { Button } from '@material-ui/core';

interface Cnt {
  cen?: string
}
const Bnt3 = styled(Button)`
&&{
  ${(props:Cnt) => props.cen && 'display: block;'}
  margin: 30px auto;
  border-radius: 24px;
  padding: 8px 28px;
}`

const Test: React.FC = () => {
  return (
    <>
    <Bnt3 cen='true' variant="contained" type="button" color="secondary" >Log In</Bnt3>
    <Bnt3 variant="contained" type="button" color="secondary">Log In</Bnt3>
    </>
  ); 
}
export default Test;