[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: 3px 5px rgba(,,,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"的更多相关文章
- styled components草根中文版文档
1.styled components官网网址 https://www.styled-components.com/docs 以组件的形式来写样式. 1.1安装 yarn add styled-c ...
- [React Fundamentals] Using Refs to Access Components
When you are using React components you need to be able to access specific references to individual ...
- [React] React Fundamentals: Using Refs to Access Components
When you are using React components you need to be able to access specific references to individual ...
- [React] Prevent Unnecessary Rerenders of Compound Components using React Context
Due to the way that React Context Providers work, our current implementation re-renders all our comp ...
- The Road to learn React书籍学习笔记(第一章)
react灵活的生态圈 Small Application Boilerplate: create-react-app Utility: JavaScript ES6 and beyond Styli ...
- 使用create react app教程
This project was bootstrapped with Create React App. Below you will find some information on how to ...
- 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)
作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...
- Angular 2 to Angular 4 with Angular Material UI Components
Download Source - 955.2 KB Content Part 1: Angular2 Setup in Visual Studio 2017, Basic CRUD applicat ...
- 推荐 9 个样式化组件的 React UI 库
简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...
随机推荐
- Struts(18)标签
控件标签 Struts 2 的标签有一组标签.更easy控制流程页面运行.下面是重要的Struts2控制标签列表: if /else 标签: 这些标签运行可在每一种语言找到的一种基本条件流程. 'If ...
- zoj 2317 Nice Patterns Strike Back(矩阵乘法)
problemId=1317">http://acm.zju.edu.cn/onlinejudge/showProblem.do? problemId=1317 给出一个n*m的矩阵( ...
- css3中关于伪类的使用
目标: css中after伪类,last-child伪类的使用.以及部分css3的属性. 过程: 在制作导航时.常常会遇到在每个li后面加入一个切割符号,到最后一个元素的时候,切割符就会去掉的一种效果 ...
- 【HDOJ 5384】Danganronpa
[HDOJ 5384]Danganronpa AC自己主动机. .. 当时感觉用字典树 标神也往自己主动机想来着..手太生加上时间紧迫也没敲--回来一看题解什么AB同一时候建自己主动机...顿时愣了 ...
- 排序(1)---------选择排序(C语言实现)
选择排序的基本思想: 选择排序(Selection sort)是一种简单直观的排序算法. 它的工作原理例如以下.首先在未排序序列中找到最小(大)元素,存放到排序序列的起始位置,然后,再从剩余未排序元素 ...
- OpenCASCADE Extended Data Exchange - XDE
OpenCASCADE Extended Data Exchange - XDE eryar@163.com Abstract. OpenCASCADE Data Exchange allows de ...
- Linux下MySQL导入导出数据库
linux下 一.导出数据库用mysqldump命令(注意mysql的安装路径,即此命令的路径):1.导出数据和表结构:mysqldump -u用户名 -p密码 数据库名 > 数据库名.sql# ...
- BZOJ离线版
http://dh.attack.cf/bzoj/ 闲来无事自己搞的 可以查看权限题 至于这个东西怎么搞, 可以私信我2333 网站已经挂掉. 想看的可以去rxz大爷的blog http://ruan ...
- kafka删除主题
hdp集群默认不能删除kafka主题,如果要删除,需要在ambari上进行配置,将enable delete设置为true.
- [BZOJ4555 TJOI2016 HEOI2016 求和]
第一篇博客,请大家多多关照.(鞠躬 BZOJ4555 TJOI2016 HEOI2016 求和 题意: 给定一个正整数\(n\)(\(1\leqq n \leqq100000\)),求: \[ ...