Add Classes to Styled Component

Question

I am trying to add class names to a React Component to make it easier for me to customize that component using Styled Components. Here is a simplified outline of the compone

Answer 1

You need to provide className for the wrapper/container as styled-component injecting the styles through it:

const SignupForm = ({ className }) => (
  <form className={className}>
    <input className="input" />
    <button className="button">Button</button>
  </form>
);

const Form = styled(SignupForm)`
  .input {
    background-color: palegreen;
  }

  .button {
    background-color: palevioletred;
  }
`;