我该如何使用样式化组件来对react-datepicker这样的东西进行样式化呢?datepicker库看起来像是使用了某种类型的BEM样式(下面的屏幕截图),我通常只会使用它们提供的类名,而使用Sass来对那些类名进行样式化。但是,我该如何使用样式化组件来定位那些类名呢?这可能吗?
react-datepicker
ozxc1zmp1#
因为styled-components只是CSS™,所以可以像处理其他样式表一样,使用提供的类名react-datepicker。唯一的区别是,你必须将日期选择器 Package 在一个 Package 器样式的组件中,该组件应用所有这些类:
styled-components
const Wrapper = styled.div` &.react-datepicker { color: blue; } ` <Wrapper> <Datepicker /> </Wrapper>
9bfwbjaz2#
经过几个小时的搜索,我发现最好的解决方案是添加一个样式化的父组件(它可以是一个div)覆盖需要className的组件,并将className的定义直接添加到样式化的父组件中。
非常重要:
在与号&和类之间需要一个空格才能使此操作生效!
&
const StyledParent = styled.div` & .your-class-name { border-color: red; } `; <StyledParent> <Datepicker yourClassName="your-class-name" /> </StyledParent>
ffdz8vbo3#
如果您需要访问其他零部件并设置其样式,并且它们不在同一文件中,则可以执行此操作:导出您需要访问的任何内容:
export { Wrapper as CircledButtonWrapper };
将其导入到您需要的位置:
import { CircledButtonWrapper } from "/Bla/CircledButton";
在需要设置样式的地方使用它:
const Wrapper = styled.div` /* Some other styles */ &:hover { ${CircledButtonWrapper} { opacity: 1; } } `;
编辑:我现在明白了,这个问题是指访问className...
3条答案
按热度按时间ozxc1zmp1#
因为
styled-components
只是CSS™,所以可以像处理其他样式表一样,使用提供的类名react-datepicker
。唯一的区别是,你必须将日期选择器 Package 在一个 Package 器样式的组件中,该组件应用所有这些类:
9bfwbjaz2#
经过几个小时的搜索,我发现最好的解决方案是添加一个样式化的父组件(它可以是一个div)覆盖需要className的组件,并将className的定义直接添加到样式化的父组件中。
非常重要:
在与号
&
和类之间需要一个空格才能使此操作生效!ffdz8vbo3#
如果您需要访问其他零部件并设置其样式,并且它们不在同一文件中,则可以执行此操作:
导出您需要访问的任何内容:
将其导入到您需要的位置:
在需要设置样式的地方使用它:
编辑:我现在明白了,这个问题是指访问className...