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. 记录网件r6220路由器登录配置

    1.设置本地连接为自动获取ip和DNS地址 2.使用网线连接电脑和路由器的LAN口 3.http://routerlogin.net/BRS_index.htm 4.用户名和密码: admin pas ...

  2. Linux服务器更换主板后,网卡识别失败的处理方法

    1)现象说明公司IDC机房里的一台线上服务器硬件报警,最后排查发现服务器主板坏了,随即联系厂商进行更换主板,最后更换后,登录服务器,发现网卡绑定及ip信息都在,但是ip却ping不通了,进一步排查,重 ...

  3. Charles使用详解

    前言: Charles是在 Mac 下常用的网络封包截取工具,在做移动开发时,我们为了调试与服务器端的网络通讯协议,常常需要截取网络封包来分析. 一.主界面介绍       二.网页抓包 启动 Cha ...

  4. 20135337——实践一:Linux基础配置

    一.配置系统,权限中简单梳理遇到的问题 1.Ubuntu中root和普通用户相互切换 1.从user用户切换到root用户 执行:sudo su 2.从root用户切回user用户 执行:su use ...

  5. tensorflow win10 系统下安装

    安装tensorflow gpu版本 Step1 安装CUDA8.0 进入这个云盘地址下载,密码5aoc 进行CUDA8.0下载.下载完成后解压,打开exe文件直接按照默认进行安装,安装步骤比较繁琐, ...

  6. Apache+php安装和配置 windows

    Apache+php安装和配置 windows Apache 安装 1.官网网址:http://httpd.apache.org/ 2.Download 3.点击链接Files for Microso ...

  7. Activiti Rest API tutorial

    http://192.168.66.182:8080/activiti-rest/service/repository/deployments/ {"data":[{"i ...

  8. Ehcache配置参数示例

    从Ehcache的jar包里抽取的 <!-- ~ Licensed to the Apache Software Foundation (ASF) under one ~ or more con ...

  9. 解决AJAX应用,会话超时(Session Timeout)的问题,粗略方法(不考虑使用Filter的前提下)

    function ajaxPost(url, data) { var async = false; var result = {}; $.ajax({ url : url, async : async ...

  10. Fidder 网络抓包调试工具

    可参考文章:[HTTP]Fiddler(二) - 使用Fiddler做抓包分析 fiddler2抓包工具使用图文教程