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 ...
随机推荐
- Java基础之 反射是什么?
什么是反射,反射能干嘛? 反射是:指程序可以访问.检测和修改它本身状态或行为的一种能力 反射是一种能力,所以给的定义就是说明了它能干嘛. 我们平时用反射主要做: 获取类型的相关信息 动态调用方法 动态 ...
- AspNetCore中使用Ocelot之 IdentityServer4(1)
AspNetCore中使用Ocelot之 IdentityServer4(1) 前言: OceLot网关是基于AspNetCore 产生的可扩展的高性能的企业级Api网关,目前已经基于2.0 升级版本 ...
- Netty中的Channel之数据冲刷与线程安全(writeAndFlush)
本文首发于本博客,如需转载,请申明出处. GitHub项目地址 InChat 一个轻量级.高效率的支持多端(应用与硬件Iot)的异步网络应用通讯框架 前言 本文预设读者已经了解了一定的Netty基础知 ...
- 微信H5页面 会被软键盘顶起来
问题描述:H5页面在微信中打开,input输入框获取焦点时,页面被软键盘顶上去:关闭软键盘时,页面不会自动下来(恢复初始状态) H5页面在微信中初始状态如下图: input输入框获取焦点时,页面被软键 ...
- js 骂人不带脏字 (!(~+[]) + {})[--[~+""][+[]] * [~+[]] + ~~!+[]] + ({} + [])[[~!+[]] * ~+[]] 图解
看到掘金上翻出一个老梗,前端如何不带脏字得骂产品经理傻逼(sb),复制(!(~+[]) + {})[--[~+""][+[]] * [~+[]] + ~~!+[]] + ({} + ...
- arcgis api 3.x for js 热力图优化篇-不依赖地图服务(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- Web API 持续集成:PostMan+Newman+Jenkins(图文讲解)
本文由葡萄城技术团队于博客园原创并首发 转载请注明出处:葡萄城官网,葡萄城为开发者提供专业的开发工具.解决方案和服务,赋能开发者. 上篇文章我们已经完成了API测试工具选型,接下来是一系列周期性的开发 ...
- Android 字体适配方案
开发过程中,按照UI设计尺寸做好UI页面,当用户自定义自己的手机字体大小之后UI完全没法看了,这个时候就在想让app字体大小始终一致就好了 下面看一下,出现的问题和解决方案 做个简单的例子,先 ...
- Java Memory Management
How Memory works in Java The role of the stack - Each time you call a function, Java pushed the loca ...
- 开启远程桌面连接windows的方法以及遇到的问题
确认电脑的远程服务是否已经开启 开始--运行--输入“services.msc ”,打开服务,找到三个remote desktop开头的服务 Remote Desktop Configuration. ...