styled-components 最新版本是v4.1.2,但是从v4开始,就酱原来的injectGlobal方法用createGlobalStyle替换了。用法上也有一些不同了:

我今天直接引injectGlobal照原来的方法使用,就一直报错

//style.js
import {injectGlobal} from 'styled-components';
injectGlobal`
body{
margin:0;
padding:0;
background:red;
}
`

说styled-components库里没有抛出这个方法,不对啊,以前是这样用过的,后来一查,原来是被弃用了。

emmmm,怎么办呢,还得用呀,不过人家又提供了个新的方法。createGlobalStyle,真真是见名知意了。

//style.js
import {createGlobalStyle} from 'styled-components';
export const GlobalStyled = createGlobalStyle`
body{
margin:0;
padding:0;
background:red;
}
//在项目主文件(总容器)下引入,我这里用的是App.js
import React from 'react';
import {GlobalStyled} from './style.js';
class App extends React.Components{
render(){
return(
<div className='App'>
<GlobalStyled />
</div>
)
}
}

当当当,大功告成了! 红红火火恍恍惚惚

styled-components 弃用 injectGlobal的更多相关文章

  1. styled components草根中文版文档

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

  2. 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)

    作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...

  3. 大前端的自动化工厂(2)—— SB Family

    原文链接:https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89f 我坦白我是标题党,SB只是SCSS-Bourbon的简写 ...

  4. 使用styled-components实现CSS in JS

    前面的话 使用jsx语法可以实现HTML in JS,使用svgr可以实现svg in JS,使用styled-components可以实现CSS in JS.这样,使用react开发,就变成了使用J ...

  5. React-使用styled-components

    1.安装 npm install --save styled-components 2.简单使用 style.js: import styled from 'styled-components'; i ...

  6. Next.js v4.1.4 文档中文翻译【转载】

    最近想稍稍看下 React的 SSR框架 Next.js,因为不想看二手资料, 所以自己跑到 Github上看,Next.js的文档是英文的,看倒是大概也能看得懂, 但有些地方不太确定,而且英文看着毕 ...

  7. CSS Overrides: Friend or Foe?

    转自:http://www.callumhart.com/blog/css-overrides-friend-or-foe Anyone familiar with CSS will know how ...

  8. 9 CSS in JS Libraries You Should Know in 2018

    转自:https://blog.bitsrc.io/9-css-in-js-libraries-you-should-know-in-2018-25afb4025b9b 实际上  wix 的 styl ...

  9. 推荐 9 个样式化组件的 React UI 库

    简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...

随机推荐

  1. 前端入门CSS(3)

    day60 不透明度 opacity()\ opacity (不透明度)             1. 取值0~1             2. 和rgba()的区别:                ...

  2. 三,mysql优化--sql语句优化之索引一

    1,需求:如何在一个项目中,找到慢查询的select,mysql数据库支持把慢查询语句,记录到日志中.供程序员分析.(默认不启用此功能,需要手动启用) 修改my.cnf文件(有些地方是my.ini) ...

  3. Python大法之从火车余票查询到打造抢Supreme神器

    本文作者:i春秋作家——阿甫哥哥 系列文章专辑:https://bbs.ichunqiu.com/forum.php?mod=collection&action=view&ctid=9 ...

  4. Java并发工具类之同步屏障CyclicBarrier

    CyclicBarrier的字面意思是可以循环使用的Barrier,它要做的事情是让一个线程到达一个Barrier的时候被阻塞,直到最后一个线程到达Barrier,屏障才会放开,所有被Barrier拦 ...

  5. 用c语言实现三子棋

    1 game.c://实现三子棋的.c文件 #define _CRT_SECURE_NO_WARNINGS #include"game.h" void init_board(cha ...

  6. (转)Python - 字符串对齐

    https://zhuanlan.zhihu.com/p/33923344-----------Python小知识:用format格式化输出字符串 版权声明:本文为博主原创文章,未经博主允许不得转载. ...

  7. commons-pool2

    转载请注明源出处:http://www.cnblogs.com/lighten/p/7375611.html 1.前言 本章介绍一下常用基础Jar包commons-pools2,最近使用到了thrif ...

  8. Python的不定长参数研究

     通过观察程序和运行结果我们发现,传参时将1传给了a,将2传给了b,将3,4,5传给了*args,将m=6,n=7,p=8传给了**kwargs.为什么是这样传参呢?*args和**kwargs又是什 ...

  9. java数据结构之队列

    队列概述队列是一种特殊的线性表,它只允许在表的前端(front)进行删除操作,而在表的后端(rear)进行插入操作.进行插入操作的端称为队尾,进行删除操作的端称为队头.队列中没有元素时,称为空队列.– ...

  10. 【Java并发编程】:使用synchronized获取互斥锁

    在并发编程中,多线程同时并发访问的资源叫做临界资源,当多个线程同时访问对象并要求操作相同资源时,分割了原子操作就有可能出现数据的不一致或数据不完整的情况,为避免这种情况的发生,我们会采取同步机制,以确 ...