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. 总结几个常用的系统安全设置(含DenyHosts)

    1)禁止系统响应任何从外部/内部来的ping请求攻击者一般首先通过ping命令检测此主机或者IP是否处于活动状态如果能够ping通 某个主机或者IP,那么攻击者就认为此系统处于活动状态,继而进行攻击或 ...

  2. python基础学习笔记(八)

    创建自已对象就python非常核心的概念,事实上,python被称为面向对象语言,本章会介绍如何创建对象.以及面向对象的概念:继承.封装.多态. 多态: 可对不同类的对象使用同样的操作. 封装:对外部 ...

  3. LINUX内核分析第五周学习总结——扒开系统调用的“三层皮”(下)

    LINUX内核分析第五周学习总结--扒开系统调用的"三层皮"(下) 标签(空格分隔): 20135321余佳源 余佳源 原创作品转载请注明出处 <Linux内核分析>M ...

  4. 20135327--linux内核分析 实践二

    内核模块编译 1.实验原理 Linux模块是一些可以作为独立程序来编译的函数和数据类型的集合.之所以提供模块机制,是因为Linux本身是一个单内核.单内核由于所有内容都集成在一起,效率很高,但可扩展性 ...

  5. SQL Server 递归查询上级或下级组织数据(上下级数据通用查询语法)

    查询上级组织数据: WITH OCTE AS ( AS LVL FROM IOV_Users U LEFT JOIN IOV_Organization O ON U.OrgId=O.ID UNION ...

  6. ajax 异步请求 代码

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...

  7. PAT 1003 我要通过!

    https://pintia.cn/problem-sets/994805260223102976/problems/994805323154440192 “答案正确”是自动判题系统给出的最令人欢喜的 ...

  8. mybatis批量插入和批量更新

    批量插入数据使用的sql语句是: insert into table (aa,bb,cc) values(xx,xx,xx),(oo,oo,oo) mybatis中mapper.xml的代码如下: & ...

  9. 文件系统的block 数据库中的block 以及内存中的page基础知识汇总(自己理解 可能有误)

    1. 操作系统文件系统中的的block 文件系统中的block 是文件系统最小的读写单元,在HDD的磁盘时代, 一般block的大小可能与磁盘的扇区大小一致为 512bytes 也因为这个原因MBR启 ...

  10. Android提供的layout文件存放位置

    在编程的过程中,会用到android.R.layout下的一些常量.与这些常量对应的,Android提供了对应点的layout布局文件. android.jar中有对应的xml文件,但是打开的时候通常 ...