1. styled(Input) 报错
报错信息:
Warning: React does not recognize the markRedxx
prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase markredxx
instead. If you accidentally passed it from a parent component, remove it from the DOM element.
代码:
<StyledInput
placeholder="请输入"
$markRed={markRedByKey('地点')}
markRedxx
/>
export const StyledInput = styled(Input)`
background-color: ${(props) => (props.$markRed ? 'rgba(255, 0, 0,0.2)' : '')};
`;
怎么解决:
在props最前面加上$
就不会将该属性渲染到Input上
How to extend styled component without passing props to underlying DOM element?
2. 一个用styled-components的项目嵌套到另一个styled-components的项目,样式冲突
styled-components生成的classname并不是随机的,两个项目有很多classname都是重复的。
两个项目用的版本都是5.x 搜了下styled-components没有自带加前缀的方式,通过babel-plugin-styled-components namespace实现样式的区分
"plugins": [
[
"babel-plugin-styled-components",
{
"namespace": "geek-sdk"
}
]
]
网友评论