使用 styled-components 提供一个 css 类

Question

我有一个 3rd 方库，它需要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，但我只想知道如何使用 CSSstyled-components来完成这项工作。

谢谢 ：）

Answer 1

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

简单className重命名

如果您需要使用 styled-components 生成的类名，假设我们知道它将附加到classNameprop 上，您可以创建一个中间组件来根据需要操作它。

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

Answer 2

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

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

<StyledDatePicker calendarClassName="calendarClassName">