当使用styled-components 为自定义功能性反应组件设置样式时，未应用样式。这是simple example，其中样式未应用于StyledDiv：
const Div = () => (<div>test</div>)
const StyledDiv = styled(Div)`
color: red;
`;
确保正确应用样式的最佳方法是什么？
【问题讨论】：
标签： javascript reactjs styled-components
来自docs：
styled 方法完美适用于您自己或任何 第三方组件也是如此，只要它们通过 className prop 到他们渲染的子组件，它也应该通过它，并且 很快。最终，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>【讨论】：
像这样使用styled(Component) 创建一个类，该类作为名为@987654322@ 的道具传递给被包装的组件。
然后您可以将其应用于根元素：
const Div = ({ className }) => (
<div className={className}>test</div>
)
const StyledDiv = styled(Div)`
color: red;
`;
【讨论】：
如果您无法更改原始组件（它是导入或生成的），假设该组件是<span>，您可以使用例如包装它<div> 并嵌套 css 规则，如下所示：
const ComponentICantTouchWrapper = ({className}) => (
<div className={className}><ComponentICantTouch /></div>
);
const StyledComponentICantTouch = styled(ComponentICantTouchWrapper)`
> span {
color: red;
}
`;
【讨论】：
在我的例子中，我尝试使用带有材质 UI 的样式化组件。我的想法是这样做：（在大多数情况下都有效）
const StyledTableRow = ({ className, children }) => (
<TableRow className={className}>{children}</TableRow>
);
【讨论】：