javascript - 如何创建接受颜色作为参数的React组件？

假设我想使用react创建一个自定义按钮。我想让该组件接受颜色作为其属性，并根据属性中的颜色进行渲染。

class MyButton extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { name, color } = this.props;

    return (
      <div className="my-button">
        <button type="button" className="btn">
          {name}
        </button>
      </div>
    );
  }
}

如何将color注入按钮CSS样式（边框和字体颜色）？

最佳答案

使用类似：

编辑：也添加了边框颜色代码

class MyButton extends React.Component {
  constructor(props) {
    super(props);
  }

  render() {
    const { name, color } = this.props;

    return (
      <div className="my-button">
        <button type="button" className="btn"
          style={{
             color,
             borderColor:color
                 }}>
          {name}
        </button>
      </div>
    );
  }
}