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. k8s集群之Docker安装镜像加速器配置与k8s容器网络

    安装Docker 参考:https://www.cnblogs.com/rdchenxi/p/10381631.html 加速器配置 参考:https://www.cnblogs.com/rdchen ...

  2. 解决margin塌陷问题

    父元素添加: border: 1px solid transparent; 或者 over-flow:hidden;

  3. html自动刷新

    头部<meta http-equiv="refresh" content="10"> 或者js实现 <script language=&quo ...

  4. saltstack入门个人笔记

    offical website reference1 reference2 install apt-get install python-software-properties apt install ...

  5. HTML中 DOM操作的Document 对象详解(收藏)

    Document 对象Document 对象代表整个HTML 文档,可用来访问页面中的所有元素.Document 对象是 Window 对象的一个部分,可通过 window.document 属性来访 ...

  6. vs 2012安装ASP.NET MVC5

    VS2012能使用MVC5开发,但VS2012不自带MVC5,需要安装“用于 Visual Studio 2012 的 ASP.NET 和 Web 工具 2013.1” 从下面提供的链接下载安装: h ...

  7. 纯css实现同一页面下选择之后更换内容效果

    实现效果为如下:在同一页面下,当我选中输入手机号时,出现手机号输入框,当我选中输入验证码时,出现验证码输入框,当我选中设置密码时,出现密码框 在这里有一个小技巧,就是  1.对下面的输入框设置同样的样 ...

  8. Java中的线程安全和非线程安全以及锁的几个知识点

    1. 线程安全就是多线程访问时,采用了加锁机制,当一个线程访问该类的某个数据时,进行保护,其他线程不能进行访问直到该线程读取完,其他线程才可使用.不会出现数据不一致或者数据污染. 线程不安全就是不提供 ...

  9. nginx解决跨域(前后端分离)

    Nginx解决跨域问题 后端接口 请求地址 返回数据(json数据) http://127.0.0.1:8080//app Hello World! 前端代码 通过nginx做静态资源服务器访问端口8 ...

  10. 使用finalshll连接linux

    一.安装ubuntu: 我在window10上装了VMware,好像window10自带虚拟机吧;然后傻瓜式装机,装好后发现没网不知道什么原因,然后百度啪啦啪啦找了一堆,解决方法是: 然后重启下ubu ...