styled-components 弃用 injectGlobal
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的更多相关文章
- styled components草根中文版文档
1.styled components官网网址 https://www.styled-components.com/docs 以组件的形式来写样式. 1.1安装 yarn add styled-c ...
- 6周学习计划,攻克JavaScript难关(React/Redux/ES6 etc.)
作者:余博伦链接:https://zhuanlan.zhihu.com/p/23412169来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 和大家一样,最近我也看了Jo ...
- 大前端的自动化工厂(2)—— SB Family
原文链接:https://bbs.huaweicloud.com/blogs/53c0c3509b7a11e89fc57ca23e93a89f 我坦白我是标题党,SB只是SCSS-Bourbon的简写 ...
- 使用styled-components实现CSS in JS
前面的话 使用jsx语法可以实现HTML in JS,使用svgr可以实现svg in JS,使用styled-components可以实现CSS in JS.这样,使用react开发,就变成了使用J ...
- React-使用styled-components
1.安装 npm install --save styled-components 2.简单使用 style.js: import styled from 'styled-components'; i ...
- Next.js v4.1.4 文档中文翻译【转载】
最近想稍稍看下 React的 SSR框架 Next.js,因为不想看二手资料, 所以自己跑到 Github上看,Next.js的文档是英文的,看倒是大概也能看得懂, 但有些地方不太确定,而且英文看着毕 ...
- CSS Overrides: Friend or Foe?
转自:http://www.callumhart.com/blog/css-overrides-friend-or-foe Anyone familiar with CSS will know how ...
- 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 个样式化组件的 React UI 库
简评:喜欢 CSS in JS 吗?本文将介绍一些使用样式组件所构建的 React UI 库,相信你会很感兴趣的. 在 React 社区,对 UI 组件进行样式化的讨论逐步从 CSS 模块到内联 CS ...
随机推荐
- 小型Http服务器
HTTP又叫做超文本传输协议,现如今用的最多的版本是1.1版本.HTTP有如下的特点: 支持客户/服务器模式(C/S或B/S) 简单快速:基于请求和响应,请求只需传送请求方法和请求路径 灵活:HTTP ...
- gulp-load-task 解决 gulpfile.js 过大的问题
当我们在项目中使用gulp来实现前端自动化时,常常因任务太多导致gulpfile.js越来越臃肿,增加后期维护/变更成本.在计算机科学领域中,分治可以将我们的项目变得井然有序.所以,我们利用这个理念, ...
- php if 的实现
简单分析下php中的分支背后的实现 <?php ){ echo "a"; }else{ echo "b"; } 1.语法分析 unticked_state ...
- Python基础8:列表推导式(list)字典推导式(dict) 集合推导式(set)
推导式分为列表推导式(list),字典推导式(dict),集合推导式(set)三种 1.列表推导式也叫列表解析式.功能:是提供一种方便的列表创建方法,所以,列表解析式返回的是一个列表格式:用中括号括起 ...
- Zabbix3.2邮件告警python脚本
一.概述及环境要求 1.概述 zabbix监控也起到重要作用,以下是使用python脚本发送告警邮件配置方法.之前使用过sendemail邮件报警但是发现邮件主题为中文时候会出现乱码的问题. 2.环境 ...
- HTTP2.0探究
http1.1和http2.0在请求379张图片的对比演示(HTTP2.0性能惊人). HTTP2.0是HTTP协议自1999年HTTP1.1发布后的首个更新,主要基于SPDY(读speedy). ...
- Linux 线程占用CPU过高定位分析
今天朋友问我一个Linux程序CPU占用涨停了,该如何分析, CPU占用过高,模拟CPU占用过高的情况 先上一段代码: #include <iostream> #include <t ...
- jQuery表格自动增加
<!DOCTYPE html> <html dir="ltr" lang="zh-CN"> <head> <meta ...
- ubuntu16.04更改源为阿里源
一.通过系统更换源 第一步:备份原来的源文件cd /etc/apt/ 然后会显示下面的源文件sources.list输入命令sudo cp sources.list sources.list.bak ...
- 【C#小知识】C#中一些易混淆概念总结(六)---------解析里氏替换原则,虚方法 分类: C# 2014-02-08 01:53 1826人阅读 评论(0) 收藏
目录: [C#小知识]C#中一些易混淆概念总结--------数据类型存储位置,方法调用,out和ref参数的使用 [C#小知识]C#中一些易混淆概念总结(二)--------构造函数,this关键字 ...