如何创建接受颜色作为参数的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注入按钮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>
    );
  }
}

Answer 2

尽量不要使用内联CSS。 最好去上课

  .btn-primary: {
      color: blue;
  }

这是您的按钮。

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

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

    return (
      <div className="my-button">
        <button type="button" className={"btn "+ (classNameProp ? classNameProp : '')}>
          {name}
        </button>
      </div>
    );
  }
}

然后您像这样使用它。

<MyButton classNameProp="btn-primary"/>