使用 styled-components 提供 css 类

Question

我有一个第 3 方库，它需要一个 calendarClassName 来修改它的样式，它需要一个 CSS 类的传统类名。我可以使用样式化组件来完成此操作吗？

我试过css函数，但它不起作用，结果是样式数组而不是CSS类实体。

只想做这样的事情：

const myStyle = css`color: black`;

<DatePicker calendarClassName={myStyle}> // won't work

尝试attrs 没有任何运气，className 尚未传递给 DatePicker。

const calendarClassName = "calendar";
export const MyDatePicker = styled(DatePicker).attrs({
  calendarClassName,
})`
  .${calendarClassName} {
    border-radius: 0px;
    box-shadow: 2px 0px 2.5px #D6D6D6;
    border: 1px solid ${color.pacific};
  }
`;

我知道我可以直接使用 CSS，但我只想知道如何使用 styled-components 来完成这项工作。

谢谢:)

Answer 1

styled-components 不提供生成类名而不将它们附加到组件的方法。但是，我们可以利用此功能来实现您的需求。

简单的className重命名

如果您需要使用 styled-components 生成的类名，鉴于我们知道它将附加到 className 属性，您可以创建一个中间组件来根据需要对其进行操作。

const ClassNameToCalendarClassName = ({ className, ...rest }) => (
  <Calendar calendarClassName={className} {...rest} />
);

const SConvertClassNameToCalendarClassName = styled(ClassNameToCalendarClassName)`
  color: blue;
`;

多个className重命名

对于在代码中的给定点需要多个classNames 的情况，您需要的中间组件与所需的类一样多：

const ClassNameToC3 = ({ c1, c2, className, ...rest }) => (
  // if you pass {...rest}, c1 and c2 are redundant, but included for clarity
  <Calendar c1={c1} c2={c2} c3={className} {...rest} />
);

const ClassNameToC2 = ({ className, ...rest }) => (
  <ClassNameToC3 c2={className} {...rest} />
);

const ClassNameToC1 = ({ className, ...rest }) => (
  <ClassNameToC2 c1={className} {...rest} />
);

以及匹配的样式组件，

// Styled components
const SClassNameToC3 = styled(ClassNameToC3)`...`;
const SClassNameToC2 = styled(ClassNameToC2)`...`;
const SClassNameToC1 = styled(ClassNameToC1)`...`;

Answer 2

您可以使用以下代码 sn-p 注入 CSS 类。在下面的 sn-p 中，在 class-1 中，颜色属性将被覆盖。如果 class-1 已经是正在应用的现有类，这将起作用，否则您必须将 className='class-1' 传递给 DatePicker。

import styled, { css } from 'styled-components';
export const StyledDatePicker = styled(DatePicker)`
.class-1 {
 color: black;
}
`;

Answer 3

如果 DatePicker 接收到额外的 className，然后将其附加到自身的类列表中，那么它确实可以使用 styled 对其进行包装，以对其应用额外的样式。我看到你已经尝试了所有可能的方法，但没有一个有效。这可能表明第三方 lib 不处理额外的 className，因此您无法将 SC 与 lib 结合在一起。

Answer 4

如果将calendarClassName 应用于嵌套元素，我认为这种方法可以解决您的问题。

const StyledDatePicker = styled(DatePicker)`
  .calendarClassName {
    border-radius: 0px;
    box-shadow: 2px 0px 2.5px #D6D6D6;
    border: 1px solid ${color.pacific};
  }
`;

<StyledDatePicker calendarClassName="calendarClassName">

Answer 5

试试这个：

const Wrapper = styled.div`
  & .calendarClassName{
    // your style goes here
  }
`;

<Wrapper>
   <DatePicker />
</Wrapper>

或

const DtPicker = styled(DatePicker)`
  & .calendarClassName{
    // your style goes here
  }
`;

<DtPicker />

必须在 '&' 和 '.calendarClassName'

之间使用 '空格'