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 ...
随机推荐
- ssh 连接 wsl2
修改ssh相关config https://cloud.tencent.com/developer/article/1538305 其中,端口可以设置成 2222 以防万一 然后在wsl 中执行如下命 ...
- JavaScript 、三个点、 ...、点点点 是什么语法
笔者在学习ts函数式的时候见到这样的写法,这个语法是es6的扩展运算符,可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开:还可以在构造字面量对象时, 将对象表达式按key-va ...
- ubuntu18.04下联想电脑不能打开wifi
一.问题描述: 本人使用联想拯救者14IFI笔记本在安装Ubuntu系统时会出现无线硬件开关关闭的问题,当然也就无法连网(Wi-Fi). (最好先使用 sudo rfkill unblock all) ...
- NoSQL(简介、历史)
NoSQL 为什么使用NoSQL 1.单机MySQL的网站 APP----->DAL------>MySQL 90年代:一个基本的网站访问量一般不会很大,单个数据库完全足够. 那个时候,更 ...
- 叠堆柱状图(带折线版+2y轴)
叠堆柱状图(带折线+2y轴) 代码 var chartDom=document.getElementById("stackBarAddLine"); var myChart=ech ...
- P5491 【模板】二次剩余
\(\text{Summary}\) 实际上是做法的归纳 一切皆是结论性的,没有证明! 模 \(p\) 意义下的二次剩余有 \(\frac{p-1}2\) 个,二次非剩余也恰有那么多 考虑解关于 \( ...
- Hexo系列(一):Hexo简介
作者:独笔孤行 官网: http://anyamaze.com 公众号:云实战 前言 博客网站的实现方法有很多种,常用的博客框架主要有wordpress.Z-Blog.hexo.Typech ...
- 题解 [SCOI2007]压缩
好题. 显然区间 dp,令 \(f_{l, r}\) 为 \([l, r]\) 之间的最短的长度.如果我们要压缩,那么就要考虑 M 与 R 的位置.由于我们大体是从左往右来转移的,所以显然我们只需要记 ...
- Django中admin的一些知识点
Django中的Admin站点管理: 内容发布的部分由网站的管理员负责,包括查看.添加.修改.删除数据: Django项目中默认启用Admin管理站点:列表页选项, 编辑页选项, 重写模板. #准备工 ...
- ASP动态网页(网站)设计教程
ASP动态网页(网站)设计教程 文件名 大小 ASP获取时间函数大全 35KB 项目6 ASP数据表数据操作功能设计.pptx 3.34 MB 项目5 WEB数据库与数据库管理.pptx 3.34 M ...