styled-components 全局样式定义,由injectGlobal改为createGlobalStyle
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的更多相关文章
- styled-components解决全局样式'injectGlobal' 废除的问题
		最新版的 styled-components v4 已经将原有的 injectGlobal() 方法替换成了 createGlobalStyle() ,而且用法也和之前的 injectGlobal 方 ... 
- BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))
		2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ... 
- styled components草根中文版文档
		1.styled components官网网址 https://www.styled-components.com/docs 以组件的形式来写样式. 1.1安装 yarn add styled-c ... 
- bootstrap复习:全局样式
		一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ... 
- 全局css , 样式设置, css 初始化. css ,style ,全局样式, 初始化样式
		全局CSS设置总结 1.清除所有标记的内外边距 html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldse ... 
- taro 组件的外部样式和全局样式
		自定义组件对应的样式文件,只对该组件内的节点生效. 编写组件样式时,需要注意以下几点: 组件和引用组件的页面不能使用 id 选择器(#a).属性选择器([a])和标签名选择器,请改用 class 选择 ... 
- bootstrap基础学习小记(一)简介模板、全局样式
		2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ... 
- SW4STM32 全局宏定义
		/************************************************************************************ * SW4STM32 全局宏 ... 
- UWP 轻量级样式定义(Lightweight Styling)
		在 UWP 中,可以通过给空间直接设置属性或在 Style 中设置属性来定制空间的样式:不过这样的样式定义十分有限,比如按钮按下时的样式就没法儿设置.当然可以通过修改 Template 来设置控件的样 ... 
- vue文件引入全局样式导致样式重复
		通常项目中src下的子目录都会有一个style文件夹,专门用来存放全局的样式文件. 这个style文件夹下,一般有reset.css.var.scss.mixin.scss.class.scss.in ... 
随机推荐
- C#通过OLEDB将DataTable写入Excel文件中
			利用OLEDB将DataTable数据写入Excel文件中,如果数据量过多,执行效率很缓慢,大数据量不推荐使用此方法. /// <summary> /// 创建DataTable /// ... 
- ‘mongo‘不是内部或外部命令,也不是可运行的程序或批处理文件
			出现问题原因: MongoDB环境变量未配置 解决办法: 1)右击我的电脑-->属性,进入系统属性界面,点击如下图所示位置的[高级系统设置],在弹窗的[系统属性]的[高级]选项卡右下角点击[环境 ... 
- 推荐一款新的自动化测试框架:DrissionPage!
			今天给大家推荐一款基于Python的网页自动化工具:DrissionPage.这款工具既能控制浏览器,也能收发数据包,甚至能把两者合而为一,简单来说:集合了WEB浏览器自动化的便利性和 request ... 
- 【python自动化测试】1- python基础和pycharm使用
			python基础和pycharm使用 1.pycharm 1.1 为特定格式文件添加头信息 File--Settings--Editor--File and Code Templates--Pytho ... 
- 图说论文《LSM-based Storage Techniques: A Survey》
			本文从 <LSM-based Storage Techniques: A Survey> 摘取部分图片,来介绍 LSM tree 的相关内容.详细内容请查看论文原文. in-place u ... 
- 如何快速把导出的csv表格数据导入到SqlServer中
			(不要建自增字段,否则会出现第一个字段数据进不去的情况) 1.打开csv表格 2.打开要导入的表,右键编辑前两百行 3.表格中CTRL+C 数据库中CTRL+V 搞定! ** ... 
- IP 地址分类及子网划分
			IP 地址分类 在现实生活中,一个市区有许多的区,区下面又有很多的街道,街道下面又有很多的小区,A 市区.B 市区就是一个范围,每一个范围都有不同的居民数量.类比到计算机网络,A 类地址可以容纳256 ... 
- 一文搞懂│http 和 https 的通信过程及区别
			目录 两者的区别 HTTP的通信过程 HTTPS的通信过程 两者的区别 端口: http 端口号是80,https 端口号是443 传输协议: http 是超文本传输协议,属于明文传输:https 是 ... 
- [引擎开发] 深入GPU和渲染优化(基础篇)
			https://blog.csdn.net/ZJU_fish1996/article/details/109269448 
- PHP实现QQ第三方登录代码
			前言: PHP实现QQ快速登录,罗列了三种方法 方法一:面向过程,回调地址和首次触发登录写到了一个方法页面[因为有了if做判断], 方法二,三:面向对象 1.先调用登录方法,向腾讯发送请求,2.腾讯携 ... 
