React中styled-components给自定义组件加样式不生效的解决方法

styled-components 对组件做样式包裹时，会自动生成唯一类名，以className属性的形式传递给被包裹的组件。

• 从material-ui导入的组件默认已经做了属性透传，会自动把接收到的className绑定到组件根DOM节点上，所以样式可以正常生效
• 你自己编写的List组件没有接收className属性，也没有把这个属性绑定到内部的DOM元素上，生成的类名根本没挂载到真实页面节点，样式自然不会生效

方案1：给自定义组件透传className（推荐，最符合styled-components设计规范） #

直接修改List.js代码，接收传入的className并绑定到组件根元素上即可，原有样式代码不需要做任何改动：

import React from "react";

const List = ({ className }) => {
  return (
    <div className={className}>
      <h1>Hello styled component</h1>
    </div>
  );
};

export default List;

方案2：不修改原组件，外层套原生标签承载样式 #

如果你不想改动原有List组件的代码，可以直接把样式绑定到外层原生DOM标签上，使用时把List组件作为子元素放入即可。
首先修改样式定义：

export const ListCotainer = styled.div`
  margin: 100px;
  color: pink;
`;

然后修改App.js里的使用方式：

<ListCotainer>
  <List />
</ListCotainer>

注意：所有自定义组件要对接styled-components，核心都是要保证styled生成的类名最终能挂载到真实渲染的DOM节点上，类名没有落到DOM上的话，任何样式都不会生效。

内容的提问来源于stack exchange，提问作者Happy1234