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的更多相关文章

  1. js中获取css属性

    直接获取 window.onload = function() { var but = document.getElementById('button'); var div = document.ge ...

  2. js中获取css样式属性值

    关于js中style,currentStyle和getComputedStyle几个注意的地方 (1)用js的style只能获取元素的内联样式,内部样式和外部样式使用style是获取不到的.针对css ...

  3. JS中获取CSS样式的方法

    1.对于内联样式,可以直接使用ele.style.属性名(当然也可以用键值对的方式)获得.注意在CSS中单词之间用-连接,在JS中要用驼峰命名法 如 <div id="dv" ...

  4. js中获取css的样式

    因为给定一个div宽度或者其他样式之后,再设置一个border的宽度在js中得到的obj.setoffWidth就会变成width加上border的二倍宽度,因此可以自己写一个方法来获取样式.(obj ...

  5. 叁、js中的css

    一.子选择器:用来选择一个父元素直接的子元素,不包括子元素的子元素,它的符号为“>” 注:ie6不支持子代选择器. <!DOCTYPE html PUBLIC "-//W3C// ...

  6. js中获取css样式的两种方式

    1. 对象.style.样式名  弊端就是只能获取行内样式 2.window.getComputedStyle(对象,null); 最好用第二种方式 <!DOCTYPE html> < ...

  7. Vue.js中css的作用域

    Vue.js中的css的作用域问题: 如果在vue组件下的style中定义样式,效果会作用于整个html页面,如果只想本组件的css样式只作用于本组件的话,在<style>标签里添加sco ...

  8. H5_0010:JS动态创建CSS,并向CSS中传入参数值

    1,在html中定义style 2,js中创建css,并添加进入head标签style中 !function(e, t, i) { n.classList && n.classList ...

  9. vue中的css作用域、vue中的scoped坑点

    一.css作用域 之前一直很困扰css的作用域问题,即使是模块化编程下,在对应的模块的js中import css进来,这个css仍然是全局的.导致在css中需要加上对应模块的html的id/class ...

随机推荐

  1. C_运算符_逻辑表达式

    // 除法取余运算符的例子 //2018年9月19日22:44:21 # include<stdio.h> int main(void) { printf(%, %-, -%, -%-, ...

  2. Linux内核及分析 第六周 分析Linux内核创建一个新进程的过程

    实验过程 1.github上克隆相应的mengning/menu.git 2.测试menuOS,测试fork直接执行结果 3.配置调试系统,进入gdb调试,利用file linux-3.18.6/vm ...

  3. Aop事务小结(事务管理器和自身构建)

    声明市事务是利用AOP来实现的. 1.采用事务管理器AOP: <!--3.配置事务切面:控制住连接池 --> <bean id="transactionManager&qu ...

  4. shell脚本--数值比较

    用于数值比较的无非大于.小于.等于.大于等于.小于等于这几个. 比较格式: [ 数值1 比较符 数值2 ]   注意左边的括号与数值1之间有一个空格,同样,数值2和右边的括号之间也有空格. 数值比较运 ...

  5. 77 Linux commands and utilities you'll actually use

    https://searchdatacenter.techtarget.com/tutorial/77-Linux-commands-and-utilities-youll-actually-use

  6. string、const char*、 char* 、char[]相互转换

    转化总结如下: 目标格式 源格式 string const char* char* char[] string NULL const char*=string.c_str(); const char* ...

  7. Delphi之Exception获得错误信息(简单好理解)

    Delphi之Exception获得错误信息 相关资料: http://www.cnblogs.com/hackpig/archive/2010/02/15/1668547.html 实例代码: 1 ...

  8. 云时代的IT运维面临将会有哪些变化

    导读 每一次IT系统的转型,运维系统和业务保障都是最艰难的部分.在当前企业IT系统向云架构转型的时刻,运维系统再一次面临着新的挑战.所以在数据中心运维的时候,运维人员应该注意哪些问题? 在云计算时代, ...

  9. Go语言之unsafe包介绍及使用

    unsafe内容介绍 type ArbitraryType int type Pointer *ArbitraryType func Sizeof(x ArbitraryType) uintptr f ...

  10. BZOJ4448[Scoi2015]情报传递——主席树+LCA

    题目描述 奈特公司是一个巨大的情报公司,它有着庞大的情报网络.情报网络中共有n名情报员.每名情报员口J-能有 若T名(可能没有)下线,除1名大头目外其余n-1名情报员有且仅有1名上线.奈特公司纪律森严 ...