Question

我试图覆盖由样式化组件（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;
`;

注意：

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

查看更多信息here。

Answer 2

<label style={{color: "green"}}>{this.props.children}</label>

或

const style = {color : "green"};
<label style={style}>{this.props.children}</label>

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

2 个答案: