Question

使用styled-components设置自定义功能react组件的样式时，不会应用样式。这是simple example，其中样式未应用于StyledDiv：

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

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

Answer 1

来自docs：

样式化的方法可以完全独立或完全适用第三方组件，只要它们通过className 对其渲染子组件的支持，也应该通过它；以及以此类推。最终，必须将className向下传递给实际的DOM节点才能使样式生效。

例如，您的组件将变为：

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'))

<script src="//unpkg.com/react@16.5.2/umd/react.development.js"></script>
<script src="//unpkg.com/react-dom@16.5.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/styled-components/3.4.9/styled-components.min.js"></script>
<div class="app"></div>

Answer 2

像这样使用styled(Component)创建一个类，该类作为名为className的prop传递给包装的组件。

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

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

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

Answer 3

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

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

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

3 个答案: