如何創建接受顏色作為參數的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"/>