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

Question

假设我想使用 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 注入(inject)按钮 css 样式(边框和字体颜色)？

Answer 1

使用类似的东西:

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

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>
    );
  }
}