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 ...
随机推荐
- JSP第八次作业
数据库test 中建个表 stu(stuid 主键 自动增长 ,用户名,密码,年龄) 1.设计一个注册页面,实现用户注册功能2.设计一个登陆页面,实现用户名密码登陆3.两个页面可以互相超链接 1 pa ...
- springboot输出json日志
<dependency> <groupId>net.logstash.logback</groupId> <artifactId>logstash-lo ...
- spring security登录认证流程解析
转 https://blog.csdn.net/qq_37142346/article/details/80032336 1.说明 用户认证流程 认证结果如何在多个请求之间共享 获取认证用户信息.用户 ...
- ECharts 饼图切换数据源bug 开始没数据显示 切换或刷新后显示
1.出现问题原因 一个饼图,右上方两个按钮分别为今天和本月,分别调用不同接口控制,点击则调用不同接口同时饼图绑定数据源刷新:出现此问题原因点击今日按钮有一个饼图区域形没有数据不显示,对应数据值比例都没 ...
- 树莓派读取ip
# -*- coding:utf-8 -*- #@author:YouLei #@time:2020/05/27=11:20 import time import socket time.sleep( ...
- 操作系统复习(updating)
操作系统复习(updating) 1.进程和线程的区别是什么? 1)调度:进程是操作系统资源分配的基本单位,而线程是处理器任务调度和执行的基本单位 2)拥有资源:不论是传统操作系统还是设有线程的操作系 ...
- Java/.Net双平台核心,Jvm和CLR运行异同点
前言: 本篇以.Net 7.0.2 CLR 和 OpenJDk19参照,解析下它们各自调用函数的异同. 以下为个人理解. 概述 JDK大约5.9G,CLR大约7.6G,两者相差1.7G左右. root ...
- Java的注释和标识符
java 的注释规则 1. 单行注释 语法:// 描述://用于当行注释,与JavaScript一样 //这是一个代码注释 2. javadoc注释 语法: /** *注释内容 / 描述:多行注释中可 ...
- LeetCode-630 课程表Ⅲ
来源:力扣(LeetCode)链接:https://leetcode-cn.com/problems/course-schedule-iii 题目描述 这里有 n 门不同的在线课程,按从 1 到 n ...
- Android ViewModel,LiveData 简要分析
ViewModel: 负责为关联UI(activity/fragment)进行数据管理,业务逻辑处理.不直接持有view引用,不对UI进行访问调用操作 对外通过暴露Livedata方式响应处理结果 L ...