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

標籤：ack   ble   use   button   rom   cti   root   component   com   

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

 

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