样式化组件未将样式应用于自定义函数 React 组件

Question

使用styled-components设置自定义函数式 react 组件的样式时，不会应用样式。下面是一个简单的示例，其中样式未应用于StyledDiv：

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

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

Answer 1

从文档中：

样式化的方法非常适合您自己或任何 第三方组件也是如此，只要它们传递类名 支持到他们渲染的子组件，这些子组件也应该传递它，以及 等等。最终，类名必须向下传递到 样式生效的实际 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;
}
`;

Answer 4

就我而言，我尝试将样式化组件与材质 UI 一起使用。我的想法是这样做：(在大多数情况下有效(

const StyledTableRow = ({ className, children }) => (
<TableRow className={className}>{children}</TableRow>
);