为导入的样式组件设置样式答案

【问题标题】：Style an imported styled-component为导入的样式组件设置样式
【发布时间】：2018-08-05 03:08:14
【问题描述】：

我有以下组件：

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

我怎样才能做到这一点？

【问题讨论】：

类似Comp.extend?
@OrB 是的，但是扩展组件是一个样式化组件，而是一个返回样式化组件的 React 组件
@OrB 好的，所以我找到了同时使用extend 和withComponent 的解决方案。即将发布。谢谢大佬

标签： reactjs styled-components

【解决方案1】：

根据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 哑组件类。

【讨论】：

您的示例中的 H3 组件是做什么用的？
H3 是您的哑组件，您在其中包装了 StyledH3 ，在您使用 H3 扩展样式组件的代码中。当您应该使用StyledH3 的styled-component 时
那么如何将h3扩展样式与H3组件结合起来呢？
你不能，我就是这么说的。这是不可能的。正如我在回答中所说，您可以将styled-component 与另一个扩展。
谢谢，但这并不能解决我需要组件逻辑和扩展样式的用例。我确实设法通过结合extend 和withComponent 来解决它。即将发布。再次感谢

【解决方案2】：

我设法通过使用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 组件的情况下移动样式组件内的逻辑

【讨论】：

来自文档的注释："As of styled-components v4 the withComponent API is now a candidate for deprecation."

【解决方案3】：

您需要在导出的组件上公开 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

【讨论】：

试过了，它没有帮助。 Error: Cannot create styled-component for component: undefined

【解决方案4】：

使用 styled-components `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>
);

【讨论】：

使用 styled-components v4 "as" :

h3.js

card.js

使用 styled-components `v4` "as" :