javascript - React Reusable Button Component - How do I properly pass a background color prop?

Question

Right now I am trying to make a reusable button component where I can pass in a color prop to set the background depending on what component it is in.

CustomButton.js

const CustomButton = ({ children, link, color }) => {
  return (
    <a href={link}>
      <button className={styles.customButton} backgroundColor={color}>
        {children}
      </button>
    </a>
  );
};

App.js

<CustomButton link='/' color='red'>Test</CustomButon>

Answer 1

You should set the background color as part of the style property.

const CustomButton = ({ children, link, color }) => {
  return (
    <a href={link}>
      <button 
         className={styles.customButton} 
         style={{background: color}}
      >
        {children}
      </button>
    </a>
  );
};