使用styled component来提供css类
我有一个第三方库，这需要一个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来完成这项工作。
谢谢:)
回答 5
Stack Overflow用户
发布于 2020-04-25 18:13:26
在没有附加到组件的情况下，styled-components不提供生成类名的方法。但是，我们可以利用此功能来实现您想要的功能。
简单className重命名
如果您需要使用由styled-components生成的类名，并且我们知道它将被附加到className属性，那么您可以根据需要创建一个中间组件来操作它。
const ClassNameToCalendarClassName = ({ className, ...rest }) => (
<Calendar calendarClassName={className} {...rest} />
);
const SConvertClassNameToCalendarClassName = styled(ClassNameToCalendarClassName)`
color: blue;
`;多个className重命名
对于在代码中给定点需要多个className的情况，您将需要与所需的类一样多的中间组件：
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)`...`;Stack Overflow用户
发布于 2018-09-21 09:58:42
您可以使用以下代码片段注入CSS类。在下面的代码片段中，在class-1中，colour属性将被重写。如果class-1已经是正在应用的现有类，那么这将起作用，否则您将不得不将className=' class -1‘传递给DatePicker。
import styled, { css } from 'styled-components';
export const StyledDatePicker = styled(DatePicker)`
.class-1 {
color: black;
}
`;Stack Overflow用户
发布于 2019-12-05 10:38:34
如果DatePicker接收到额外的className，然后将其附加到自身的类列表中，那么它会使用样式的对其进行包装，以对其应用额外的样式。我知道你已经尝试了所有可能的方法，但都不管用。这可能表明第三方库不处理额外的className，因此您不可能将SC与库结合在一起。
https://stackoverflow.com/questions/52378924
复制
腾讯云开发者
