8

我将如何react-datepicker使用 styled-components 设置样式?datepicker 库看起来像是使用某种类型的 BEM 样式(下面的屏幕截图),我通常只使用它们提供的类名并使用 Sass 设置样式。但是,我将如何使用样式化组件来定位这些类名?这甚至可能吗?

在此处输入图像描述

4

2 回答 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 回答