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. Python3出现"No module named 'MySQLdb'"问题-以及使用PyMySQL连接数据库

    Python3 与 Django 连接数据库,出现了报错:Error loading MySQLdb module: No module named 'MySQLdb'.原因如下:在 python2 ...

  2. mysqldump数据导出问题和客户端授权后连接失败问题

    1,使用mysqldump时报错(1064),这个是因为mysqldump版本太低与当前数据库版本不一致导致的.mysqldump: Couldn't execute 'SET OPTION SQL_ ...

  3. Docker容器学习梳理 - 基础知识(1)

    Docker是PaaS 提供商 dotCloud 开源的一个基于 LXC 的高级容器引擎,源代码托管在 Github 上, 基于go语言并遵从Apache2.0协议开源.Docker是通过内核虚拟化技 ...

  4. hadoop-mapreduce-(1)-统计单词数量

    编写map程序 package com.cvicse.ump.hadoop.mapreduce.map; import java.io.IOException; import org.apache.h ...

  5. Echarts学习求教

    有没有人用过百度的Echarts?刚开始接触,下面这段代码怎么理解啊,新手求指教: myChart.showLoading();$.get('data/asset/data/les-miserable ...

  6. 第六次Scrum meeting

    第六次Scrum  meeting 任务及完成度: 成员 12.21 12.22 陈谋 任务1040:完成stackoverflow的数据处理后的json处理(98%) 任务1114-1:完成对网页数 ...

  7. 20135316王剑桥Linux内核学习记笔记第七周

    20135316王剑桥<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC 1000029000 一.可执行程序是怎么得来的? 编译 ...

  8. 网络:Xen理解

    Xen是由剑桥大学计算机实验室开发的一个开源项目.是一个直接运行在计算机硬件之上的用以替代操作系统的软件层,它能够在计算机硬件上并发的运行多个客户操作系统(Guest OS). 一.Xen虚拟化类型 ...

  9. back

    #include<stdio.h>   int main()   {   int a[5],b[5][5];   int i,j,sum,max,m,n;   printf("输 ...

  10. 第三个Sprint冲刺第六天(燃尽图)