首页 > 代码库 > [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>;
[React] Theme your application with styled-components and "ThemeProvider"
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。