styled-components解决全局样式'injectGlobal' 废除的问题
最新版的 styled-components v4 已经将原有的 injectGlobal() 方法替换成了 createGlobalStyle() ,而且用法也和之前的 injectGlobal 方法不同了。
注意:直接像原 injectGlobal 方法一样使用不能生效,要定义一个全局样式变量,这个变量将作为组件插入文档。
具体解决方式:
1. 用createGlobalStyle定义全局样式
import { createGlobalStyle } from 'styled-components'
export const Globalstyle = createGlobalStyle`
body{
margin:0;
padding:0;
font-family:sans-serif;
background:green;
}
`

styled-components解决全局样式'injectGlobal' 废除的问题的更多相关文章
- styled components草根中文版文档
1.styled components官网网址 https://www.styled-components.com/docs 以组件的形式来写样式. 1.1安装 yarn add styled-c ...
- bootstrap 全局样式设置
HTML <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" co ...
- BootStrap入门教程 (一) :手脚架Scaffolding(全局样式(Global Style),格网系统(Grid System),流式格网(Fluid grid System),自定义(Customing),布局(Layouts))
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
- bootstrap复习:全局样式
一.概览 1.Bootstrap 是移动设备优先的. 2.在移动设备浏览器上,通过为视口(viewport)设置 meta 属性为 user-scalable=no 可以禁用其缩放(zooming)功 ...
- 【JAVAWEB学习笔记】24_filter实现自动登录和解决全局的编码问题
过滤器Filter 学习目标 案例-自动登录 案例-解决全局的编码 一.过滤器Filter 1.filter的简介 filter是对客户端访问资源的过滤,符合条件放行,不符合条件不放行,并且可以对目标 ...
- 全局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 选择 ...
- 关于微信小程序中组件和页面对全局样式的继承性
1.组件只能继承全局样式中的font和color(backgroundcolor不继承) 2.页面可以继承全局样式中所有样式
- bootstrap基础学习小记(一)简介模板、全局样式
2011年,twitter的“一小撮”工程师为了提高他们内部的分析和管理能力,用业余时间为他们的产品构建了一套易用.优雅.灵活.可扩展的前端工具集--BootStrap.Bootstrap由MARK ...
随机推荐
- Spring Boot系列(一) Spring Boot准备知识
本文是学习 Spring Boot 的一些准备知识. Spring Web MVC Spring Web MVC 的两个Context 如下图所示, 基于 Servlet 的 Spring Web M ...
- Python:鲜为人知的功能特性(下)
GitHub 上有一个名为<What the f*ck Python!>的项目,这个有趣的项目意在收集 Python 中那些难以理解和反人类直觉的例子以及鲜为人知的功能特性,并尝试讨论这些 ...
- WebApiClient百度地图服务接口实践
1. 文章目的 随着WebApiClient的不断完善,越来越多开发者选择WebApiClient替换原生的HttpClient,然而在应用到实际项目中多多少少会遇到一些项目结合上的疑问和困难,本文将 ...
- Docker进阶之九:Dockerfile 及 通过Dockerfile搭建lnmp
一.Dockerfile指令 指令 描述 指令 描述 FROM 构建的新镜像是基于哪个镜像 例如:FROM centos:6 COPY 拷贝文件或目录到镜像,用法同上例如:COPY ./start.s ...
- 基础知识:语言、编程、计算机组成、cpu、存储器
2019年3月18日一. 语言:一种事物与另外一种事物沟通的介质. 编程语言:程序员与计算机沟通的介质. 编程:把要让计算机做的事用一种编程语言表达出来. ...
- 数据库管理工具DataGrip使用总结(一)
DataGrip是JetBrains公司推出的管理数据库的产品,对于JetBrains公司,开发者肯定都不陌生,IDEA和ReSharper都是这个公司的产品,用户体验非常不错. 下载地址:https ...
- Python全栈开发之---迭代器、可迭代对象、生成器
1.什么叫迭代 现在,我们已经获得了一个新线索,有一个叫做“可迭代的”概念. 首先,我们从报错来分析,好像之所以1234不可以for循环,是因为它不可迭代.那么如果“可迭代”,就应该可以被for循环了 ...
- java基础(一):谈谈java内存管理与垃圾回收机制
看了很多java内存管理的文章或者博客,写的要么笼统,要么划分的不正确,且很多文章都千篇一律.例如部分地方将jvm笼统的分为堆.栈.程序计数器,这么分太过于笼统,无法清晰的阐述java的内存管理模型: ...
- 3.SDL落地方案
01.安全培训 安全意识培训(全员) 邮件安全 钓鱼邮件 邮件伪造 第三方转存 检查发件人 开启二次验证 邮件转发 第三方代收 邮件附件敏感信息加密 病毒防范 什么是木马病毒 我安装哪些杀毒软件? 定 ...
- 实现DataTables搜索框查询结果高亮显示
DataTables是封装好的HTML表格插件,丰富了HTML表格的样式,提供了即时搜索.分页等多种表格高级功能.用户可以编写很少的代码(甚至只是使用官方的示例代码),做出一个漂亮的表格以展示数据.关 ...