[React] Theme your application with styled-components and "ThemeProvider"

In this styled-components lesson, we set a "primary color" within a UI "theme" object. We make this theme accessible to all components by wrapping our application inside a .

 

Define a theme object:

const theme = {
  primary: "#a04ed9"
};

 

Add provider:

import { ThemeProvider } from "styled-components";

ReactDOM.render(
  <ThemeProvider theme={theme}>
    <App />
  </ThemeProvider>,
  document.getElementById("root")
);

 

 

Use the theme from props:

import React from "react";
import styled from "styled-components";

const Button = styled.button`
  background: ${props => props.theme.primary};
  color: white;
  font-size: 1rem;
  padding: .75rem 2rem;
  box-shadow: 0 3px 5px rgba(0,0,0,0.1);
  cursor: pointer;
  border: none;
  border-radius: 4px;
`;

export default props => <Button>{props.children}</Button>;