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. Spring自动注入的几种方式

    ---恢复内容开始---   @Service("accountEmailService")public class AccountEmailServiceImpl impleme ...

  2. CPP-基础:文字常量区

    内存不可写 char* 先看一个例子 ///////////// //代码1 #include <string> main() { char *buf = "good morni ...

  3. Native.js示例汇总

    Native.js虽然强大和开放,但很多web开发者因为不熟悉原生API而难以独立完成.这篇帖子的目的就是汇总各种写好的NJS代码,方便web开发者.众人拾柴火焰高,有能力的开发者多多提交NJS代码, ...

  4. WebSocket 学习笔记

    WebSocket 学习笔记 来自我的博客 因为项目原因需要用到双工通信,所以比较详细的学习了一下浏览器端支持的 WebSocket. 并记录一些遇到的问题. 简介 WebSocket 一般是指浏览器 ...

  5. C指针复制字符串从一个数组到另一个数组

    #include <stdio.h> void  copyString (char  *to, char  *from) {      while ( *from ) // from指针遇 ...

  6. GC 机制

    1. 为什么需要垃圾回收? 因为内存是有限的,在不断的分配内存空间而不回收的话内存迟早都会被消耗完,所以垃圾回收是必须的. 2. 触发GC 的条件: 1.GC在优先级最低的线程中运行,一般在应用程序空 ...

  7. mysql 数据库 show命令

    MySQL中有很多的基本命令,show命令也是其中之一,在很多使用者中对show命令的使用还容易产生混淆,本文汇集了show命令的众多用法. 1. show tables或show tables fr ...

  8. 6. COLUMN_PRIVILEGES

    6. COLUMN_PRIVILEGES 表COLUMN_PRIVILEGES提供有关列权限的信息.它从mysql.columns_priv系统表中获取其值 . 表COLUMN_PRIVILEGES包 ...

  9. Release Python Program as exe

    py2exe 可以用来将python program 以exe的形式发布. 安装py2exe 对于python 3.x pip install py2exe 可以直接安装 对于python 2.7, ...

  10. HTML5新增的非主体元素header元素、footer元素、hgroup元素、adress元素

    ---恢复内容开始--- header header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,例如数据表格.搜索表单或相关的lo ...