The injectGlobal API was removed and replaced by createGlobalStyle in styled-components v4. 原文链接

官方链接 createGlobalStyle

具体使用

 1 import { createGlobalStyle } from 'styled-components';
2
3 export const GlobalStyle = createGlobalStyle`
4 html, body, div, span, applet, object, iframe,
5 h1, h2, h3, h4, h5, h6, p, blockquote, pre,
6 a, abbr, acronym, address, big, cite, code,
7 del, dfn, em, img, ins, kbd, q, s, samp,
8 small, strike, strong, sub, sup, tt, var,
9 b, u, i, center,
10 dl, dt, dd, ol, ul, li,
11 fieldset, form, label, legend,
12 table, caption, tbody, tfoot, thead, tr, th, td,
13 article, aside, canvas, details, embed,
14 figure, figcaption, footer, header, hgroup,
15 menu, nav, output, ruby, section, summary,
16 time, mark, audio, video {
17 margin: 0;
18 padding: 0;
19 border: 0;
20 font-size: 100%;
21 font: inherit;
22 vertical-align: baseline;
23 }
24 /* HTML5 display-role reset for older browsers */
25 article, aside, details, figcaption, figure,
26 footer, header, hgroup, menu, nav, section {
27 display: block;
28 }
29 body {
30 line-height: 1;
31 }
32 ol, ul {
33 list-style: none;
34 }
35 blockquote, q {
36 quotes: none;
37 }
38 blockquote:before, blockquote:after,
39 q:before, q:after {
40 content: '';
41 content: none;
42 }
43 table {
44 border-collapse: collapse;
45 border-spacing: 0;
46 }
47 `

在App.js中导入

 1 import { GlobalStyle } from './style.js';
2 import React, { Fragment } from 'react';
3 function App() {
4 return (
5 <Fragment>
6 <GlobalStyle />
7 <Header />
8 </Fragment>
9 );
10 }

参考链接:https://www.cnblogs.com/cxx9759/p/9807866.html

styled-components 全局样式定义,由injectGlobal改为createGlobalStyle的更多相关文章

  1. styled-components解决全局样式'injectGlobal' 废除的问题

    最新版的 styled-components v4 已经将原有的 injectGlobal() 方法替换成了 createGlobalStyle() ,而且用法也和之前的 injectGlobal 方 ...

  2. BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  3. styled components草根中文版文档

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

  4. bootstrap复习:全局样式

    一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...

  5. 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式

    全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ...

  6. taro 组件的外部样式和全局样式

    自定义组件对应的样式文件,只对该组件内的节点生效. 编写组件样式时,需要注意以下几点: 组件和引用组件的页面不能使用 id 选择器(#a).属性选择器([a])和标签名选择器,请改用 class 选择 ...

  7. bootstrap基础学习小记(一)简介模板、全局样式

    2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...

  8. SW4STM32 全局宏定义

    /************************************************************************************ * SW4STM32 全局宏 ...

  9. UWP 轻量级样式定义(Lightweight Styling)

    在 UWP 中,可以通过给空间直接设置属性或在 Style 中设置属性来定制空间的样式:不过这样的样式定义十分有限,比如按钮按下时的样式就没法儿设置.当然可以通过修改 Template 来设置控件的样 ...

  10. vue文件引入全局样式导致样式重复

    通常项目中src下的子目录都会有一个style文件夹,专门用来存放全局的样式文件. 这个style文件夹下,一般有reset.css.var.scss.mixin.scss.class.scss.in ...

随机推荐

  1. C#通过OLEDB将DataTable写入Excel文件中

    利用OLEDB将DataTable数据写入Excel文件中,如果数据量过多,执行效率很缓慢,大数据量不推荐使用此方法. /// <summary> /// 创建DataTable /// ...

  2. ‘mongo‘不是内部或外部命令,也不是可运行的程序或批处理文件

    出现问题原因: MongoDB环境变量未配置 解决办法: 1)右击我的电脑-->属性,进入系统属性界面,点击如下图所示位置的[高级系统设置],在弹窗的[系统属性]的[高级]选项卡右下角点击[环境 ...

  3. 推荐一款新的自动化测试框架:DrissionPage!

    今天给大家推荐一款基于Python的网页自动化工具:DrissionPage.这款工具既能控制浏览器,也能收发数据包,甚至能把两者合而为一,简单来说:集合了WEB浏览器自动化的便利性和 request ...

  4. 【python自动化测试】1- python基础和pycharm使用

    python基础和pycharm使用 1.pycharm 1.1 为特定格式文件添加头信息 File--Settings--Editor--File and Code Templates--Pytho ...

  5. 图说论文《LSM-based Storage Techniques: A Survey》

    本文从 <LSM-based Storage Techniques: A Survey> 摘取部分图片,来介绍 LSM tree 的相关内容.详细内容请查看论文原文. in-place u ...

  6. 如何快速把导出的csv表格数据导入到SqlServer中

    (不要建自增字段,否则会出现第一个字段数据进不去的情况) 1.打开csv表格 2.打开要导入的表,右键编辑前两百行 3.表格中CTRL+C         数据库中CTRL+V      搞定! ** ...

  7. IP 地址分类及子网划分

    IP 地址分类 在现实生活中,一个市区有许多的区,区下面又有很多的街道,街道下面又有很多的小区,A 市区.B 市区就是一个范围,每一个范围都有不同的居民数量.类比到计算机网络,A 类地址可以容纳256 ...

  8. 一文搞懂│http 和 https 的通信过程及区别

    目录 两者的区别 HTTP的通信过程 HTTPS的通信过程 两者的区别 端口: http 端口号是80,https 端口号是443 传输协议: http 是超文本传输协议,属于明文传输:https 是 ...

  9. [引擎开发] 深入GPU和渲染优化(基础篇)

    https://blog.csdn.net/ZJU_fish1996/article/details/109269448

  10. PHP实现QQ第三方登录代码

    前言: PHP实现QQ快速登录,罗列了三种方法 方法一:面向过程,回调地址和首次触发登录写到了一个方法页面[因为有了if做判断], 方法二,三:面向对象 1.先调用登录方法,向腾讯发送请求,2.腾讯携 ...