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. postman设置环境变量、全局变量

    讲postman环境变量设置之前,先讲一个小插曲,环境变量.全局变量的区别在于Globals,只能用一组,而Environmen可以设置多组,所以我更喜欢设置环境变量 1.环境变量-Environme ...

  2. nodejs 安装 淘宝镜像

    临时使用 npm --registry https://registry.npm.taobao.org install express 2.持久使用 npm config set registry h ...

  3. const函数的使用

    const知道吗?解释其作用. 1.const 修饰类的成员变量,表示成员常量,不能被修改. 2.const修饰函数承诺在本函数内部不会修改类内的数据成员,不会调用其它非 const 成员函数. 3. ...

  4. UIWebView与js那些事

    UIWebView是IOS SDK中渲染网面的控件,在显示网页的时候,我们可以hack网页然后显示想显示的内容.其中就要用到javascript的知识,而UIWebView与javascript交互的 ...

  5. LCIS 最长上升公共子序列问题

    首先点名一个串叫 L1,另一个叫L2. 明显的是一个DP,那么我们来探讨下如何求得答案. 朴素的算法 首先我们定义状态$dp[ i ][ j ]$表示L1中前i个与L2中前j个的最长公共上升子序列. ...

  6. Linux内核学习总览

    断断续续学习操作系统已经有大半年时间了,一直想系统地梳理一下. 正好借助<深入Linux内核架构> (Wolfgang Manuere 著,郭旭 译)汇总一下. 首先基础框架篇,Linux ...

  7. word break和word wrap

    默认情况下,如果同一行中某个单词太长了,它就会被默认移动到下一行去: word break(normal | break-all | keep-all):表示断词的方式 word wrap(norma ...

  8. 在不是modelAttribute的情况下,如何保存页面输入值的方法(多行遍历)

    <c:forEach var="prdRelInfo" items="${goodRelPrdList}" varStatus="s" ...

  9. JustinMind

    看到公司老板新请来的兼职产品经理,在讲项目功能设计图是,用的是justinmind这个工具,觉得很好奇,默默记下,或许以后能用到.下面是搜的简单的介绍,只是为了记住这个工具名字,现并没有想要深入探究这 ...

  10. MySQL数据库不识别server=.而是识别localhost

    MySQL数据库不识别server=.而是识别localhost