关于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 ...
随机推荐
- Mongo 开发笔记
时间 程序的时间是本地时间 ,数据库中的时间是 ISO 标准时间 . ISO时间 + 8 小时 = 本地时间(北京时间 ) Java驱动会自动做转化. 语法 数组查询 数据查询使用 elemMatch ...
- linux下rsync和tar增量备份梳理
前面总结过一篇全量备份/增量备份/差异备份说明,下面介绍下linux下rsync和tar两种增量备份的操作记录: 1)rsync备份 rsync由于本身的特性,在第一次rsync备份后,以后每次都只是 ...
- npm脚本探析
什么是 npm 脚本? 在package.json文件里面,使用scripts字段定义的脚本命令 { // ... "scripts": { "build": ...
- 回溯法解n皇后问题
#include<bits/stdc++.h> using namespace std; int n,sum; int c[100]; void search(int cur){ if(c ...
- 【Beta阶段】第六次Scrum Meeting!
每日任务内容: 本次会议为第六次Scrum Meeting会议~ 由于本次会议项目经理召开时间为9:30,在公寓1楼会客室召开,召开时长约30分钟,探讨了本次取得的重大突破后需要继续开展的工作. 队员 ...
- Linux内核分析——Linux内核学习总结
马悦+原创作品转载请注明出处+<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 Linux内核学习总结 一 ...
- 《Linux内核分析》期终总结
作者:杨舒雯,原创作品转载请注明出处,<Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 目录: 1.通过简 ...
- python中的hasattr()、getattr()、setattr()
hasattr()的用法和理解--hasattr(obj, target) 判断对象obj中是否含有,目标target属性,然后返回布尔值,如果有返回True,没有返回False. >>& ...
- 解决AJAX应用,会话超时(Session Timeout)的问题,粗略方法(不考虑使用Filter的前提下)
function ajaxPost(url, data) { var async = false; var result = {}; $.ajax({ url : url, async : async ...
- FTP Download File By Some Order List
@Echo Off REM -- Define File Filter, i.e. files with extension .RBSet FindStrArgs=/E /C:".asp&q ...