用样式化的组件覆盖React组件样式

Question

我试图覆盖由styled-components（styled。）的标准方法创建的组件的样式，而ways（styled()和style.extends）都对我有用。

但是，当我尝试使用styled()方法覆盖简单的react组件的样式时，它呈现了组件，但没有覆盖它的样式。

下面是代码片段

import React, { Component } from "react";
import styled from "styled-components";

export default class MyLabel extends Component {
  render() {
    return <label>{this.props.children}</label>;
  }
}

const StyledMyLabel = styled(MyLabel)`
    color: green;
`;

为了显示目的，我使用以下语法

<StyledMyLabel>My Styled Label</StyledMyLabel>

请参考codesandbox上的链接，该链接可能会有用

Answer 1

您必须className手动传递所需的样式元素以使其起作用。

import React, { Component } from "react";
import styled from "styled-components";

export default class MyLabel extends Component {
  render() {
    return <label className={this.props.className}>{this.props.children}</label>;
  }
}

const StyledMyLabel = styled(MyLabel)`
    color: green;
`;

注意：

不必要时，请仔细考虑是否将自己的组件包装在样式化的组件中。您将禁用自动将道具列入白名单，并颠倒建议的样式组件和结构组件的顺序。

在此处查看更多信息。