在样式化的组件中使用道具时,效果很好,但显示警告(警告:非布尔属性“ cen”收到“ true”)

时间:2019-07-24 14:15:52

标签: reactjs typescript material-ui styled-components

警告:收到非布尔属性“ cen”的“ true”如果要将其写入DOM,请传递一个字符串:cen =“ true”或cen = {value.toString() }。当我在带有样式和Component-UI的样式组件中使用道具时,效果很好,但显示警告

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;

enter image description here

2 个答案:

答案 0 :(得分:1)

以下是您共享的确切代码的演示:demo

它没有显示任何警告。您共享的代码中还有其他可能缺少的东西吗?

不过,总的来说,这就是为什么您会收到这样的警告的原因:HTML Attribute Warning

  

如果您看到此警告,则可能是通过了true   “ true”将是适当的。这很可能来自.attrs   属性,或来自您传递给一个完全不相关的道具   styled(Component)组件。

更新:

不幸的是,@material-ui/core正在将无法识别的所有道具传递给html。由于cen无法识别,因此将其传递给html,并且只能将字符串值刷新为html。因此,错误。您可以像错误提示一样使用“ true”或“ false”作为字符串,也可以使用styled-components的css props将自定义props与其余props分开。以这种方式重写组件:

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

通过这种方式,您可以阻止自定义道具沿树传播。

这里有几篇官方帖子,以检查您是否不知道如何在css中设置styled-components道具。

答案 1 :(得分:0)

这是一种数据类型错误。所以我尝试使用字符串类型而不是布尔值来解决。

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;