In this lesson, you will learn how to extend styles from one styled-component to another in a React app. This is helpful when you have two styled-components that are similar but differ in one or more CSs properties.

import styled from 'styled-components';

export const Button = styled.button`
background-color: #FF851B;
border-radius: 5px;
color: white;
display: block;
font-weight: bold;
font-size: 22px;
padding: 16px 32px;
text-transform: uppercase;
margin: 100px auto;
`; export const HelpButton = styled(Button)`
background-color: #FF4136;
margin: 15px;
position: fixed;
bottom: 0;
right: 0;
`;

[React] Extend styles with styled-components in React的更多相关文章

  1. React.createClass vs. ES6 Class Components

    1 1 1 https://www.fullstackreact.com/articles/react-create-class-vs-es6-class-components/ React.crea ...

  2. [React] Render Basic SVG Components in React

    React loves svg just as much as it loves html. In this lesson we cover how simple it is to make SVG ...

  3. [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 ...

  4. [React] Render Text Only Components in React 16

    In this session we create a comment component to explore how to create components that only render t ...

  5. 聊聊React高阶组件(Higher-Order Components)

    使用 react已经有不短的时间了,最近看到关于 react高阶组件的一篇文章,看了之后顿时眼前一亮,对于我这种还在新手村晃荡.一切朝着打怪升级看齐的小喽啰来说,像这种难度不是太高同时门槛也不是那么低 ...

  6. styled components草根中文版文档

    1.styled components官网网址 https://www.styled-components.com/docs   以组件的形式来写样式. 1.1安装 yarn add styled-c ...

  7. React.js入门笔记(续):用React的方式来思考

    本文主要内容来自React官方文档中的"Thinking React"部分,总结算是又一篇笔记.主要介绍使用React开发组件的官方思路.代码内容经笔者改写为较熟悉的ES5语法. ...

  8. 五分钟学习React(三):纯HTML代码搭建React应用

    上一期我们使用了React官方的脚手架运行React应用.大家可能会觉得这种方法很繁琐,需要配置各种第三方插件.JQuery时代的前端真是让人怀念.这一期,我就带领大家创建一个"怀旧版&qu ...

  9. React 源码剖析系列 - 不可思议的 react diff

      简单点的重复利用已有的dom和其他REACT性能快的原理. key的作用和虚拟节点 目前,前端领域中 React 势头正盛,使用者众多却少有能够深入剖析内部实现机制和原理. 本系列文章希望通过剖析 ...

随机推荐

  1. sftp ftp文件同步方案

    sftp ftp文件同步方案 1. 需求 1.1实现网关服务器的ftp服务器的/batchFileRequest目录下文件向徽商所使用的sftp服务器的/batchFileRequest目录同步文件 ...

  2. 三、C++ const分析

    1.C语言中的const: const修饰的变量是只读的,本质还是变量 const修饰的局部变量在栈上分配空间 const修饰的全局变量在只读存储区分配空间 const只在编译期有用,在运行期无效 c ...

  3. [LUOGU] [NOIP2017] P3960 列队

    题目描述 Sylvia 是一个热爱学习的女孩子. 前段时间,Sylvia 参加了学校的军训.众所周知,军训的时候需要站方阵. Sylvia 所在的方阵中有 n \times mn×m 名学生,方阵的行 ...

  4. mysql 5.7 windows zip安装

    mysql 官网下载windows zip 安装包 并解压 (D:wampmysql-56-winx64) 添加path D:wampmysql-5722-winx64bin 创建data目录 D:\ ...

  5. 【BZOJ 1588】[HNOI2002] 营业额统计(Treap)

    Description 营业额统计 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业情况. Tiger拿出了公司的账本,账本上记录了公司成立以来每 ...

  6. 大数据学习——shell编程

    03/ shell编程综合练习 自动化软件部署脚本 3.1 需求 1.需求描述 公司内有一个N个节点的集群,需要统一安装一些软件(jdk) 需要开发一个脚本,实现对集群中的N台节点批量自动下载.安装j ...

  7. python蛋疼的编码decode、encode、unicode、str、byte的问题都在这了

    相信很多人和我一样,被python蛋疼的编码问题纠缠不清,比如下面的 私以为出现这种错误的原因还是对一些基本的编解码概念不够熟悉,下面就说说我的理解: 首先python刚出来的时候unicode还没有 ...

  8. HUD-1559 最大子矩阵,dp模拟

    最大子矩阵                                                                                               ...

  9. 1027 stl

    #include<stdio.h> #include<queue> using namespace std; int main() {  int i,n,m,j,k,a[100 ...

  10. 【BZOJ1717&POJ3261】Milk Patterns(后缀数组,二分)

    题意:求字符串的可重叠的k次最长重复子串 n<=20000 a[i]<=1000000 思路:后缀数组+二分答案x,根据height分组,每组之间的height>=x 因为可以重叠, ...