How to style a type of element in Styled Component with a Theme

Question

I cannot see aa good normal example if the, imo, lacking documentation for styled-components

I have my theme working correctly:

export const theme = {
  button: {
    background: '#000'
  }
}

However the button has no styles applied to it.

Answer 1

You have to pass your theme into your component as a prop and set your styling with it.

Just setting a theme with a button key will not affect the button itself.

A theme is basically just a JSON object with settings that are passed to your components via the theme provider as a prop.

Like in the documentation you linked you can do this:

// Define our button, but with the use of props.theme this time
const Button = styled.button`
  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border-radius: 3px;

  /* Color the border and text with theme.main */
  color: ${props => props.theme.main};
  border: 2px solid ${props => props.theme.main};
`;

To then style your button based on the props received from your theme.