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. sync/atomic 原子操作使用与解析

    目录 前言 1. 引入 2. sync.atomic 原子操作 2.1 什么是原子操作 2.2 各种 API 的作用 2.2.1 Store 操作 2.2.2 Load 操作 2.2.3 Add 操作 ...

  2. sun.security.validator.ValidatorException: PKIXpath building failed: sun.security.provider,javax.net.ssT.SSLHandshakeExceptions.certpath.SunCertPathBuilderException

    报错信息: sun.security.validator.ValidatorException: PKIXpath building failed: sun.security.provider,jav ...

  3. vs code 关联gitee码云或github以及GIT 常用命令

    一.准备 1.本地安装vs code 和GIT源代码管理工具 2.配置vscode git全局变量 打开左下角设置-->点击用户-->搜索git.path-->settings.js ...

  4. fast planner总结

    一.前端 kinodynamic A*算法动力学路径搜索 1.1 路径搜索的主要函数为kinodynamicAstar类的search函数 int KinodynamicAstar::search(E ...

  5. BSPline

  6. MFC中的RTTI(Runtime Type Identification, 运行时类型识别)详解(参考《深入浅出MFC》)

    在MFC中的RTTI的实现,主要是利用一个名为CRuntimeClass的结构来链接各个"有关系的类"的信息来实现的.简单来说,就是在需要用到RTTI技术的类内建立CRuntime ...

  7. 中南大学CSU2022-2023级C语言期中考试机试答案

    卡在出线概率了.40%,没想到遍历时反了,我去. 1.时钟加法 1 #include<stdio.h> 2 3 #include<string.h> 4 5 #include& ...

  8. JZOJ 5033. 【NOI2017模拟3.28】A

    A 题面 思路 非常抽象地让你构造树,很容易想到 \(prufer\) 序列(如果你会的话) 说明一下:\(prufer\) 序列可以唯一确定一颗树的形态 若树的节点个数为 \(n\),那么 \(pr ...

  9. element-ui/lib/style.css in ./src/main.js 解决方案

    在node_modules 中    找到element-ui/lib路径 创建style.css文件   就好了

  10. python将一行多字符转换为多行单字符方法

    笔者这次是第一次写东西,主要是想把在运用中的一些实例给记录下来,分享给那些和笔者有同样需求的人.可能分享的方法有些累赘或者不准确,还望各位大佬勿喷,因为笔者也是python小白,这些都是通过搜索汇总得 ...