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

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 prop，以便它可以接收新的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

Answer 2

根据styled-component文档，您应该这样做。

export const StyledH3 = styled.h3`
 direction: ${(props) => (props.isRTL ? 'rtl' : 'ltr')};
`;
const H3 = ({ children }) => (
  <StyledH3 isRTL={isChildrenRTL(children)}>
    {children}
  </StyledH3>
);
export default H3;

然后在您需要的其他文件中，执行以下操作。

import H3, { StyledH3  } from 'components';

const Title = StyledH3 .extend`
  background-color: red;
`;

供参考，请查看Extending styles in styled-components

请注意，您只能扩展样式组件的样式，而不能扩展styled-component的React哑组件类。

Answer 3

我设法通过同时使用extend和withComponent方法解决了这个问题。因此，不是导出组件，而是最终导出带有其中所有逻辑的样式化组件：

const TwoWayP = styled.p`
  direction: ${props => isChildrenRTL(props.children) ? 'rtl' : 'ltr' };
`;

然后扩展样式化组件，如果需要（我需要）更改它的标签：

const TwoWayH3 = TwoWayP.withComponent('h3');

const Title = TwoWayH3.extend`
  background-color: red;
`;

因此，我的解决方案的主要部分是在没有React组件的情况下移动样式化组件内的逻辑

Answer 4

使用样式化的组件 v4 "as"：

h3.js

const StyledH3 = styled.h3`
  color:red;
`;

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

card.js

import { H3 } from 'components';

const Title = styled.div`
   border-bottom: 1px solid red;
`;

export const Card = (props) => (
  <div>
     <Title as={H3} />   <----- using "as" --------
     <p>...</p>
  </div>
);