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

满堂花醉三千客，一剑霜寒十四州。这篇文章主要讲述[React] Theme your application with styled-components and " ThemeProvider" 相关的知识，希望能为你提供帮助。
【[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> ;