How to create React components that accept color as parameter?

Question

Assume that I want to create a customized button using react. And I'd like to have this component accept color as its properties and render itself based on the color from the properties.

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

How can I inject the color into the button css style (border and font color)?

Answer 1

Use something like:

EDIT: Added code for border color too

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

Try not to use inline css. Its better to have a class

  .btn-primary: {
      color: blue;
  }

And here is your button.

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

And you use it like this.

<MyButton classNameProp="btn-primary"/>