关于next.js中的css

css进行了全局和局部的限制
export default () => (
<div className='hello'>
<p>Hello World</p>
<div className="addWords">some scoped words</div>
<style jsx>{`
.hello {
font: 15px Helvetica, Arial, sans-serif;
background: #eee;
padding: 100px;
text-align: center;
transition: 100ms ease-in background;
}
.hello:hover {
background: #ccc;
}
.addWords{
color:red;
}
`}</style>
<style global jsx>{`
body {
color:yellow;
}
`}</style>
</div>
)
可见官方的github https://github.com/zeit/next.js/tree/canary/examples/basic-css
关于next.js中的css的更多相关文章
- js中获取css属性
直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...
- js中获取css样式属性值
关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...
- JS中获取CSS样式的方法
1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...
- js中获取css的样式
因为给定一个div宽度或者其他样式之后,再设置一个border的宽度在js中得到的obj.setoffWidth就会变成width加上border的二倍宽度,因此可以自己写一个方法来获取样式.(obj ...
- 叁、js中的css
一.子选择器:用来选择一个父元素直接的子元素,不包括子元素的子元素,它的符号为“>” 注:ie6不支持子代选择器. <!DOCTYPE html PUBLIC "-//W3C// ...
- js中获取css样式的两种方式
1. 对象.style.样式名 弊端就是只能获取行内样式 2.window.getComputedStyle(对象,null); 最好用第二种方式 <!DOCTYPE html> < ...
- Vue.js中css的作用域
Vue.js中的css的作用域问题: 如果在vue组件下的style中定义样式,效果会作用于整个html页面,如果只想本组件的css样式只作用于本组件的话,在<style>标签里添加sco ...
- H5_0010:JS动态创建CSS,并向CSS中传入参数值
1,在html中定义style 2,js中创建css,并添加进入head标签style中 !function(e, t, i) { n.classList && n.classList ...
- vue中的css作用域、vue中的scoped坑点
一.css作用域 之前一直很困扰css的作用域问题,即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.导致在css中需要加上对应模块的html的id/class ...
随机推荐
- C_数据结构_循环实现求阶乘
# include <stdio.h> int main(void) { int val; printf("请输入一个数字:"); printf("val = ...
- xcode archive 去掉dsym文件和添加dsym文件
打包慢,让人发狂!!! 所以我们尝试的去掉一些测试时候用不到的东西 比如DSYM: 这DSYM是收集奔溃的.在测试的时候不需要这些东西的所以去掉就好: 项目 Build Settings -> ...
- 求去掉一条边使最小割变小 HAOI2017 新型城市化
先求最小割,然后对残量网络跑Tarjan.对于所有满流的边,若其两端点不在同一个SCC中,则这条边是满足条件的. 证明见 来源:HAOI2017 新型城市化
- easyUI中numberbox的校验
例:两个numberbox(A,B),其中两个都为必填项,要求在文本框显示红色,来显示其是必填项,其中只有当A填完之后,在能允许B进行填写,否则给出提示框,并清空其中的数据 <!DOCTYPE ...
- linux内核分析第七次实验
实验: rm menu -rf git clone https://github.com/megnning/menu.git cd menu ls mv test_exec.c test.c vi t ...
- 《蹭课神器》Beta版使用说明
相比 Alpha 版,我对主界面进行了优化,使主界面更加简洁 同时数据库增加了一个表,里面存放的是课程的详细信息
- 实例详解Java中如何对方法进行调用
原文源自http://www.jb51.net/article/73827.htm 方法调用Java支持两种调用方法的方式,根据方法是否返回值来选择. 当程序调用一个方法时,程序的控制权交给了被调用的 ...
- VMware 桥接 Bridge 复制物理网络连接状态
https://zhidao.baidu.com/question/535593443.html 意思就是说,VM上使用的是虚拟的网卡,也就是说VM虚拟机上的网卡不是真实存在的,而桥接还有其他的网路链 ...
- Centos7 yum安装Chrome浏览器
一.创建yum源文件 cd /etc/yum.repo.d/ touch google-chrome.repo 二.输入yum源信息 [google-chrome] name=google-chrom ...
- [转帖] .NET FrameWork 版本的确定方法
检测电脑安装的net framework版本 https://msdn.microsoft.com/en-us/library/hh925568(v=vs.110).aspx To find .N ...