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. 9月28日——while循环知识补充、for循环、break及continue生效范围和range方法的介绍

    目录 今日内容总结 一.while循环内容补充 1.死循环 2.嵌套和全局标志位 二.循环结构之for循环 概念介绍 for循环结构: 1.for结构 2.for...else结构 三.break和c ...

  2. 822. 走方格(acwing)

    题目: 先讲变量 n:右下角的x值 m:右下角的y值 ans:答案(有几种可能) a数组:用来存储向下和向右的动作. x:所在的位置的x值 y:所在位置的y值 x1:下一步可以走到位置的x值 y1:下 ...

  3. Fiegn 声明式接口调用

    五:Fiegn 声明式接口调用 什么是Fiegn Netfix,Fiegn 是一个提供模板式的Web Service客户端,使用Fiegn 可以简化Web Service 客户端的编写,开发者可以通过 ...

  4. Spring(IOC自动装配-基于注解开发)

    Spring IoC 自动装载 autowire: 自动装载是Spring提供的一种更加简单的方式,来完成DI,不需要手动配置property ,IoC容器会自动选择Bean玩成注入. 自动装载俩种: ...

  5. 【JavaScript】JS引擎中执行上下文如何顺序执行代码

    首先我们知道JavaScript引擎包括一个调用栈和堆,调用栈是代码实际执行的地方,使用执行上下文(执行环境)来完成:堆是非结构化的内存池,存储了应用程序所需要的所有对象. 执行上下文是什么? 执行上 ...

  6. React Native学习笔记----React Native简介与环境安装

    React Native 的基础是React, 是在 web 端非常流行的开源 UI 框架.要想掌握 React Native,先了解 React 框架本身是非常有帮助的. 一.什么是React Na ...

  7. Linux命令使用时路径存在空格、特殊符号

    https://blog.csdn.net/Homewm/article/details/102935965 Linux命令使用时路径存在空格.特殊符号(如-.@等等)如何处理呢? 再如可以转义的字符 ...

  8. python链接数据库

    一.链接数据库 #sql1.py import pymysql # user=input('用户名: ').strip() # pwd=input('密码: ').strip() #链接 # conn ...

  9. MySQL查询 根据时间字段的值的时分秒进行查询

    例如,查询小于等于10:30的时间 SELECT * FROM  表名WHERE DATE_FORMAT(TranslateOverTime,'%H') <= 10 AND DATE_FORMA ...

  10. 马哥Linux学习

    VNC virtual network computing 共享桌面协议