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. Gitee + Sourcetree 配置公钥 SSH

    设置前提 安装Git Git下载 安装sourceTree sourceTree下载 gitee账号 gitee官网 Git设置公钥 1.在安装好 sourcetree 后 点击操作选择在终端中打开 ...

  2. Redis 源码解读之 AOF Rewrite

  3. RabbitMQ 延迟消息实战

    RabbitMQ 延迟消息实战 现实生活中有一些场景需要延迟或在特定时间发送消息,例如智能热水器需要 30 分钟后打开,未支付的订单或发送短信.电子邮件和推送通知下午 2:00 开始的促销活动. Ra ...

  4. Java基础语法:类型转换、变量、常量

    Java基础语法:类型转换.变量.常量 类型转换 低---------->高 byte,short,char->int->long->float->double 从高到低 ...

  5. 【USACO 2021 February Contest, Platinum】Problem 1 No Time to Dry

    \(\text{Solution}\) 一个点可与另一个颜色相同点同时涂色当且仅当两点间颜色都大于等于这两点 那么我们可以预处理一个点向左向右最远能到的位置,记为 \(l_i,r_i)\) 当 \(l ...

  6. DIV 阴影

    <div class="div">111</div> .div { width:200px; height:200px; box-shadow: 0 0 1 ...

  7. Spark Streaming实时计算

    spark批处理模式: receiver模式:接收数据流,负责数据的存储维护,缺点:数据维护复杂(可靠性,数据积压等),占用计算资源(core,memory被挤占) direct模式:数据源由三方组件 ...

  8. 野火STM32 ADC独立模式单通道采集实验意外

    1 //about calibration 2 //ADC_ResetCalibration(ADC1); 3 //while(ADC_GetResetCalibrationStatus(ADC1) ...

  9. Word11 工程学院讲师论文office真题

    1.根据题目一的要求,打开素材文件,点击[文件]-[另存为],选择[当前文件夹],命名为Word. 2.根据题目二的要求,根据提供的参考样式,打开Word的文档,在[布局]里点击[页面设置]的右下角, ...

  10. scrapy_redis 分布式爬取酷狗音乐

    目录 声明 安装scrapy_redis 创建scrapy项目 spider模块 items模块.pipelines模块 setting.py 调试 运行 成果图 源码 声明 文章仅供学习交流使用,切 ...