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 ...
随机推荐
- 9月28日——while循环知识补充、for循环、break及continue生效范围和range方法的介绍
目录 今日内容总结 一.while循环内容补充 1.死循环 2.嵌套和全局标志位 二.循环结构之for循环 概念介绍 for循环结构: 1.for结构 2.for...else结构 三.break和c ...
- 822. 走方格(acwing)
题目: 先讲变量 n:右下角的x值 m:右下角的y值 ans:答案(有几种可能) a数组:用来存储向下和向右的动作. x:所在的位置的x值 y:所在位置的y值 x1:下一步可以走到位置的x值 y1:下 ...
- Fiegn 声明式接口调用
五:Fiegn 声明式接口调用 什么是Fiegn Netfix,Fiegn 是一个提供模板式的Web Service客户端,使用Fiegn 可以简化Web Service 客户端的编写,开发者可以通过 ...
- Spring(IOC自动装配-基于注解开发)
Spring IoC 自动装载 autowire: 自动装载是Spring提供的一种更加简单的方式,来完成DI,不需要手动配置property ,IoC容器会自动选择Bean玩成注入. 自动装载俩种: ...
- 【JavaScript】JS引擎中执行上下文如何顺序执行代码
首先我们知道JavaScript引擎包括一个调用栈和堆,调用栈是代码实际执行的地方,使用执行上下文(执行环境)来完成:堆是非结构化的内存池,存储了应用程序所需要的所有对象. 执行上下文是什么? 执行上 ...
- React Native学习笔记----React Native简介与环境安装
React Native 的基础是React, 是在 web 端非常流行的开源 UI 框架.要想掌握 React Native,先了解 React 框架本身是非常有帮助的. 一.什么是React Na ...
- Linux命令使用时路径存在空格、特殊符号
https://blog.csdn.net/Homewm/article/details/102935965 Linux命令使用时路径存在空格.特殊符号(如-.@等等)如何处理呢? 再如可以转义的字符 ...
- python链接数据库
一.链接数据库 #sql1.py import pymysql # user=input('用户名: ').strip() # pwd=input('密码: ').strip() #链接 # conn ...
- MySQL查询 根据时间字段的值的时分秒进行查询
例如,查询小于等于10:30的时间 SELECT * FROM 表名WHERE DATE_FORMAT(TranslateOverTime,'%H') <= 10 AND DATE_FORMA ...
- 马哥Linux学习
VNC virtual network computing 共享桌面协议