Question

我正在使用库中某些不在我的项目仓库中的组件。由于我使用WebGLRenderer开发自己的组件。我想对我从其他库中使用的组件进行很少的修改，而无需触碰那里的代码库。这是我要达到的目标的小示例，但以下样式均未应用于styled-component

UI库

CustomCom

我的仓库

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

Answer 1

仅当组件根据className文档将styled-components传递给DOM元素时，这才可能

样式化的方法可以完全独立或完全适用第三方组件，只要它们附加了传递的className 支持DOM元素。

https://www.styled-components.com/docs/basics#styling-any-components

这里有一些示例代码，当然可以修改库代码，据我所知您不能这样做，但是您可以分叉库并根据需要进行操作。

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

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

Answer 2

尝试以下

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

现在使用此自定义组件

<newCustom   />

如果要扩展现有的HTML标签，可以执行以下操作：

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

使用样式组件修改CSS React组件

2 个答案: