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