我将如何react-datepicker
使用 styled-components 设置样式?datepicker 库看起来像是使用某种类型的 BEM 样式(下面的屏幕截图),我通常只使用它们提供的类名并使用 Sass 设置样式。但是,我将如何使用样式化组件来定位这些类名?这甚至可能吗?
问问题
8249 次
2 回答
13
由于styled-components
它只是 CSS™,因此您可以像使用任何其他样式表一样使用react-datepicker
提供的类名。
唯一的区别是您必须将日期选择器包装在一个包装器样式的组件中,该组件应用所有这些类:
const Wrapper = styled.div`
& .react-datepicker {
color: blue;
}
`
<Wrapper>
<Datepicker />
</Wrapper>
&
编辑:根据另一个答案,在和 period之间需要有一个空格.
。
于 2017-07-25T21:20:44.700 回答
6
找了几个小时,我发现最好的解决方案是在需要className的组件上添加一个风格化的父组件(可以是一个div),并将className的定义直接添加到风格化的父组件中。
非常重要:
在&符号和类之间需要一个空格&
才能生效!
const StyledParent = styled.div`
& .your-class-name {
border-color: red;
}
`;
<StyledParent>
<Datepicker yourClassName="your-class-name" />
</StyledParent>
于 2020-11-11T20:37:12.540 回答