styled-components - 使用 styled-components 提供一个 css 类

Question

我有一个需要 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 prop，您可以创建一个中间组件来根据需要对其进行操作。

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

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

多个 className重命名

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

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)`...`;