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. PHP之旅8 URL与表单

    表单 表单的出现让用户和后台主机有了直接的交互,网站开始变的‘动态起来’,在HTML的各个标记符中,与PHP关系最为紧密的要属表单标记符了,常见的表单标记符有<form>.<inpu ...

  2. [转][SQL]如何实现存储过程中动态加入条件---没想到语句可以这么巧妙

    在存储过程过程中,如果要实现Select查询的where子句动态查询,可以用exec ( "select .... where" +@whereStr)这样的方式.但这样的话,感觉 ...

  3. cas单点登陆系统-建立单点登陆系统的应用

    上一篇如果已经操作成功,说明casServer已经实现了,下面就是搭建casClient与casServer联合调试.代码已经上传到github上.你可以下载看看,如果自己在搭建的过程中遇到问题,你也 ...

  4. Unity色子的投掷与点数的获得(详解)

    前几天需要一个色子的投掷并且获得朝上点数的Unity脚本,在网上找了很多,都是一个模子刻出来的. 对于2018版的我来说,网上找的都是很早就弃用了的老版本. 好不容易能运行了,结果并不理想,于是又突发 ...

  5. Java爬虫项目实战(一)

    目的: 通过网络爬虫爬取中国最小粒度的区域维度信息,包括省(Province) .市(City).县(County).镇(town).村委会(village) 主网站链接: http://www.st ...

  6. pythonweb框架Flask学习笔记03-变量规则

    #-*- coding:utf-8 -*- from flask import Flask app=Flask(__name__) @app.route('/post/<int:postid&g ...

  7. Android Touch事件派发流程源码分析

    分native侧事件派发到java侧和Framework派发事件到UI,流程看源码即可,此处不赘叙, Native侧派发事件的干活类图如下:

  8. 安卓开发——ListView控件(初始化ListView、列表刷新、长按添加menu)

    前言: ListView——列表,它作为一个非常重要的显示方式,不管是在Web中还是移动平台中,都是一个非常好的.不开或缺的展示信息的工具.在Android中,ListView控件接管了这一重担,在大 ...

  9. 关联更新 Update

    Update a set a.Manage_FunctID=b.Manage_FunctID   From Manage_PageUrl a   Left join Manage_ButtonBar ...

  10. 【原】Ubuntu ATI/Intel双显卡 驱动安装

    本文只针对含有AMD双显卡的部分机型,已经测试过的包括DELL Vostro 3550/DELL Inspiron 14R (AMD 6630 和 Intel HD 3000).整个安装过程需要使用命 ...