在样式化组件中使用道具时，它运行良好但显示警告（警告：收到非布尔属性 `cen` 的 `true` ）

Question

警告：已收到非布尔属性的 "true" "cen" 如果要将其写入 DOM，请改为传递字符串：cen= "true" 或 cen={value.toString()}. 当我在带有打字稿和 Material-UI 的 Styled-Component 中使用 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;

Answer 1

这是您分享的确切代码的演示：demo

它没有显示任何警告。您共享的代码中是否还缺少其他任何内容？

不过，总的来说，这就是您收到此类警告的原因：HTML Attribute Warning

If you're seeing this warning you are probably passing true where "true" would be appropriate. It's likely that this comes from a .attrs property, or from a completely unrelated prop that you're passing to a styled(Component) component.

更新：

不幸的是，@material-ui/core 将无法识别的所有道具传递给 html。由于 cen 无法识别，它会向下传递到 html，并且只有字符串值可以刷新到 html。因此错误。您可以使用 "true" 或 "false" 作为错误提示的字符串，或者另一种方法是使用 styled-components 的 [=43= 将您的自定义道具与其余道具分开] 道具。以这种方式重写组件：

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

这样你就可以阻止你的自定义道具在树上传播。

如果您不知道如何在 styled-components.

中设置 css 道具，请查看几篇官方帖子

Answer 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;

Answer 3

另一种解决方案是将布尔值转换为字符串，例如：

import styled from 'styled-components';
import TableRow from '@material-ui/core/TableRow';

export const TableRowWithOpacity = styled(TableRow)<{ completed: string 
}>`
  && {
  cursor: pointer;
  opacity: ${(props) => (props.completed === 'true' ? 0.5 : 1)};
 }
`;

像这样使用它：

<TableRowWithOpacity completed={completed.toString()}>...</TableRowWithOpacity>

在样式化组件中使用道具时，它运行良好但显示警告（警告：收到非布尔属性 `cen` 的 `true` ）

when using props in styled component it works well but shows warning (Warning: Received `true` for a non-boolean attribute `cen` )

typescript

reactjs

material-ui

styled-components

更新：