我试图覆盖由 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>
您必须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;
`;
注意：
仔细考虑是否在不需要时将自己的组件包装在样式组件中。您将禁用 props 的自动白名单，并反转样式组件和结构组件的推荐顺序。
在此处查看更多信息。
<label style={{color: "green"}}>{this.props.children}</label>
或者
const style = {color : "green"};
<label style={style}>{this.props.children}</label>