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 ...
随机推荐
- django框架之drf(部分讲解)
一.各个视图子类 两个视图基类 五个视图扩展类 九个视图子类----->视图类,不需要额外继承GenericAPIView,只需要继承九个州其中之一,就会有某个或某几个接口 路由 urlpatt ...
- 【学习日志】Cglib动态代理和JDK动态代理的对比
Cglib JDK Proxy 实现方式 生成被代理类的子类 通过被代理类实现的接口+反射 速度 慢(曾经快于JDK Proxy,但JDK Proxy几次迭代后逐渐落后) 快 限制 被代理类不能是 ...
- 一个关于DOM的小小思考
在学习过程中碰见这样一个方法(原生JavaScript可使用的方法): document.querySelector('div').innerHTML=` <h2>编号:${resp.id ...
- C-04\IDE基础知识和分支,循环语句
一.浮点数特性及比较方法 浮点数在多参数传参的时候默认是会进行精度转换,由float转换到double,浮点数是一个近视值,不能进行直接等于比较,一般可以用区间法比较但是会存在精度丢失的问题. 浮点数 ...
- springboot多模块controller访问的问题
参考 https://blog.csdn.net/qq_25091649/article/details/88429512 情况一:在主类直接写controller接口,能够访问到 @SpringBo ...
- vue-cli环境搭建 (超详细保姆级教程)
一.使用之前,我们先来掌握3个东西是用来干什么的. npm: Nodejs下的包管理器. webpack: 它主要的用途是通过CommonJS的语法把所有浏览器端需要发布的静态资源做相应的准备,比如资 ...
- Javaweb-Tomcat(安装+配置环境)
Tomcat跟着教程,但是在bin目录下点击startup只能闪退的总结 1.先下载 直接搜tomcat下载就可以了(free) 2.解压到你想要的文件中 3.直接进入bin目录,找startup.b ...
- Struts2文件配置介绍
Struts2文件配置介绍 struts2 structs.xml文件配置 标签 package标签 <?xml version="1.0" encoding="U ...
- [代码审计基础 03]-RCE-fork,system,execve
RCE-fork,system,execve 简单来讲: 数据流进入了控制流 紧紧抓住输入 不同数据层的交汇处,往往是漏洞点 远程代码执行 PHP eval() assert() preg_reple ...
- Linux centos 代替方案: Rocky Linux (centos作者)
官网: Rocky Linux