用 styled-component 修改 css react 组件

Question

我正在使用库中的一些组件，这些组件不在我的项目仓库中。由于我正在使用 styled-component 来开发我自己的组件。我想对我从其他库使用的组件做一些修改，而不触及那里的代码库。这是我想要实现的小例子，但以下样式的 none 正在应用于 CustomCom

UI图书馆

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

我的回购

export default styled(CustomCom)`
  height: 20px;
  background: green;
`;

Answer 1

根据 styled-components 文档

，只有当组件将 className 传递给 DOM 元素时才有可能

The styled method works perfectly on all of your own or any third-party components, as long as they attach the passed className prop to a DOM element.

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;
`;

用 styled-component 修改 css react 组件

Modify css react component with styled-component

reactjs

styled-components