reactjs - 使用样式化组件覆盖 react 组件样式

Question

我尝试覆盖通过 styled-components(styled.) 标准方式创建的组件的样式，并且两种方式(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>

请引用link on 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;
`;

注意:

Consider carefully whether to wrap your own components in a styled component, when it isn't necessary. You will disable the automatic whitelisting of props, and reverse the recommended order of styled components and structural components.

查看更多信息 here .