reactjs - 设置导入的样式组件的样式

Question

我有以下组件:

const StyledH3 = styled.h3`
  direction: ${(props) => (props.isRTL ? 'rtl' : 'ltr')};
`;

const H3 = ({ children }) => (
  <StyledH3 isRTL={isChildrenRTL(children)}>
    {children}
  </StyledH3>
);

export default H3;

我想扩展它的样式，例如在不同的文件中:

import { H3 } from 'components';

const Title = styled(H3)`
  background-color: red;
`;

我怎样才能实现这个目标？

Answer 1

您需要在导出的组件上公开 className 属性，以便它可以接收新的 className:

const StyledH3 = styled.h3`
    direction: ${(props) => (props.isRTL ? 'rtl' : 'ltr')};
`;

const H3 = ({ children, className }) => ( // Note - className prop.
    <StyledH3 
        className={className} // Need to add this here 
        isRTL={isChildrenRTL(children)}
    >
        {children}
    </StyledH3>
);
export default H3;

然后您可以按照您的建议在不同的文件中扩展组件样式:

import H3 from 'components';

const Title = styled(H3)`
    background-color: red;
`;

引用链接https://www.styled-components.com/docs/basics#styling-any-components