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. magic_quotes_runtime 和 magic_quotes_sybase 的作用

    如果启用了 magic_quotes_runtime,大多数返回任何形式外部数据的函数,包括数据库和文本段将会用反斜线转义引号. 如果启用了magic_quotes_sybase,单引号会被单引号转义 ...

  2. MFC隐藏在黑暗之中的大坑

    大坑一:CDC会随着窗口状态的改变而改变 void K5::OnPaint() { CDC *pDC=this->GetDC(); //CDC最好设为局部变量 ... this->Rele ...

  3. 【讲●解】KMP算法

    KMP算法 我们小组负责讲这个... 术语与规定 为了待会方便,所以不得不做一些看起来很拖沓的术语,但这些规定能让我们更好地理解\(KMP\)甚至\(AC\)自动机. 字符串匹配形式化定义如下: 假设 ...

  4. ARP 协议

    1. 什么是ARP协议? 网络层以上的协议用IP地址来标识网络接口,但以太数据帧传输时,以物理地址来标识网络接口.因此我们需要进行IP地址与物理地址之间的转化.对于IPv4来说,我们使用ARP地址解析 ...

  5. 第一讲:vcs simulation basic

    要求: 1.complie a verilog/systemverilog design using vcs 2.simulate a verilog/systemverilog design vcs ...

  6. 微信小程序request请求动态获取数据

    微信小程序开发文档链接 1 后台代码: clickButton:function(){ var that = this; wx.request({ url: 'http://localhost:909 ...

  7. 将树莓派3B+变成WiFi热点

    我有一个树莓派3B+,安装的是官方的Raspbian Stretch操作系统,该系统和Debian 9很类似,很多命令都是通用的. 接下来我将演示如何利用树莓派搭建WiFi热点,此热点就和家里的无线路 ...

  8. 初次使用xUtils3

    由于初学Android,之前也没接触过xUtils2.X系列,所以xUtils3.X弄了很久还是一直报空指针异常,后来看了Sample找到问题所在,现在把xUtils3.X的使用写来供像我这样的小白参 ...

  9. XV6第一个进程

    第一个进程 本章通过第一个进程的创建来解释 xv6 是如何开始运行的,让我们得以一窥 xv6 提供的各个抽象是如何实现和交互的.xv6 尽量复用了普通操作的代码来建立第一个进程,避免单独为其撰写代码. ...

  10. SQL2012通用分页存储过程

    --提取分页数据,返回总记录数 Createprocedure [dbo].[sp_Common_GetDataPaging_ReturnDataCount] ( @SqlString varchar ...