样式化组件未将样式应用于自定义功能反应组件

Question

当使用styled-components到样式自定义功能反应成分，都没有被应用的样式。这是一个简单的示例，其中样式未应用于StyledDiv：

const Div = () => (<div>test</div>)
const StyledDiv = styled(Div)`
  color: red;
`;

确保正确应用样式的最佳方法是什么？

Answer 1

使用styled(Component)类似的方法创建一个类，该类作为一个 prop 传递className给被包装的组件。

然后，您可以将其应用于根元素：

const Div = ({ className }) => (
  <div className={className}>test</div>
)

const StyledDiv = styled(Div)`
  color: red;
`;

Answer 2

如果您无法更改原始组件（它是导入或生成的），我们假设该组件是 a <span>，您可以用例如 a 包装它<div>并嵌套 css 规则，如下所示：

const ComponentICantTouchWrapper = ({className}) => (
    <div className={className}><ComponentICantTouch /></div>
);
const StyledComponentICantTouch = styled(ComponentICantTouchWrapper)`
    > span {
        color: red;
    }
`;

Answer 3

从文档：

样式化的方法可以完美地在您自己的所有第三方组件上运行，也可以在任何第三方组件上完美运行，只要它们将className属性传递给其渲染的子组件，子组件也应该通过它，依此类推。最终，必须将className向下传递到实际的DOM节点，以使样式生效。

例如，您的组件将变为：

const Div = ({ className }) => (<div className={className}>test</div>)
const StyledDiv = styled(Div)`
  color: green;
`;

修改示例：

const Div = ({ className }) => (<div className={className}>test</div>)
const StyledDiv = styled(Div)`
  color: green;
`;

const styled = styled.default
const Div = ({ className }) => (<div className={className}>test</div>)
const StyledDiv = styled(Div)`
  color: green;
  font-size: larger;
`;
const App = () => {
  return(<StyledDiv>Test</StyledDiv>)
}

ReactDOM.render(<App />, document.querySelector('.app'))