Reactjs 使用样式化组件修改css react组件

我正在使用库中的某些组件，这些组件不在我的项目repo中。因为我正在使用

样式化组件

来开发我自己的组件。我想对我从其他库中使用的组件做一些修改，而不必触及这些代码库。下面是我试图实现的一个小例子，但以下风格都没有应用到

CustomCom

UI库

const CustomCom = ()=>{
  return (
    <div>Child</div>
  );
}

---

仅当组件根据

样式化组件

文档将

类名

传递给DOM元素时，这才是可能的

样式化方法在您自己或任何其他应用程序上都能完美地工作 第三方组件，只要它们附加传递的类名 道具到DOM元素

这里有一些示例代码，当然它修改了库代码，我知道你不能这么做，但是如果你想的话，你可以用fork库来做

const CustomCom = ({className})=>{
  return (
    <div className={className}>Child</div>
  );
}

class App extends Component {
  render() {
    const MyElem = styled(CustomCom)`
      height: 20px;
      background: green;
    `
    return (
      <MyElem />
    );
  }
}

const CustomCom=（{className}）=>{
返回(
小孩
);
}
类应用程序扩展组件{
render（）{
const MyElem=styled（CustomCom）`
高度：20px；
背景：绿色；
`
返回(
);
}
}

试试下面的方法

export const newCustom  = styled(CustomCom)`
height: 20px;
background: green;
`;

现在使用这个自定义组件

<newCustom   />

---

这正是他们问题中的代码，并不能解决他们的问题，即在不向前传递的第三方组件上使用

样式化组件

<newCustom   />

export const newCustom  = styled.div`
height: 20px;
background: green;
`;