警告:收到非布尔属性“ 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;
答案 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;