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. Stochastic Methods in Finance (1)

    Bootcamp Topics related to measure theory. 略去,详见测度论专栏中的文章 Expectations 令 \(X\) 为 \((\Omega, \mathcal ...

  2. configurable 神图

    自己做的

  3. redis06-事务

    1 基本说明 可以一次执行多个命令,本质是一组命令的集合.一个事务中的所有命令都会序列化,按顺序地串行化执行而不会被其他命令插入,不许加塞. 2 事务相关的几个命令 2.1 MULTI 标记一个事务块 ...

  4. C#支付宝用户的静默授权

    支付宝官方的用户信息授权,具体地址:https://opendocs.alipay.com/open/289/105656 商户/开发者通过以下的 URL 拼接规则拼接用户授权的 URL 地址,该地址 ...

  5. ros_navigation案列操作流程

    1. 启动仿真 source devel/setup.bash export TURTLEBOT3_MODEL=burger roslaunch turtlebot3_gazebo turtlebot ...

  6. idea+git+gitee的使用

    idea+git+gitee的使用 下载git并安装 进入官网,选择合适的版本进行下载: 点击进入官网 下载完毕后,安装git 安装idea中的gitee插件 注意:安装好之后重启idea 进入ide ...

  7. 【KAWAKO】TVM-在ubuntu服务器上的安装

    目录 下载源码 安装依赖库 修改config.cmake文件 编译 安装python库 添加tophub 简单验证 官方的安装教程在这里 下载源码 从Download Page中下载下来的源码是0.8 ...

  8. STM32定时器TIM_OC1PreloadConfig、TIM_ARRPreloadConfig函数详解

    -------------------------------------------版权声明:本文为CSDN博主「qlexcel」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处 ...

  9. Vue 权限控制 使用自定义指令 代替v-if

    参考了vue-element-admin 指令库的permission 使用Demo(demo.vue) <template> <p>admin组:<span v-per ...

  10. drf从入门到飞升仙界 08

    断点调试使用 # 程序在debug模式运行,可以在任意位置停下,查看当前情况下变量数据的变化情况 # 使用pycharm调试程序 - 1.以debug模式运行. - 2.在代码左侧加入断点(红圈) - ...