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的項目磷籍,樣式?jīng)_突
styled-components生成的classname并不是隨機的袄秩,兩個項目有很多classname都是重復(fù)的。
兩個項目用的版本都是5.x 搜了下styled-components沒有自帶加前綴的方式裆赵,通過babel-plugin-styled-components namespace實現(xiàn)樣式的區(qū)分
"plugins": [
[
"babel-plugin-styled-components",
{
"namespace": "geek-sdk"
}
]
]