关于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 ...
随机推荐
- Linux下"负载均衡+高可用"集群的考虑点 以及 高可用方案说明(Keepalive/Heartbeat)
当下Linux运维技术越来越受到企业的关注和追捧, 在某些企业, 尤其是牵涉到电子商务和电子广告类的网站,通常会要求作负载均衡和高可用的Linux集群方案.那么如何实施Llinux集群架构,才能既有效 ...
- 《Linux及安全》课程实践二
编译生成新内核 一.实践原理 Linux模块是一些可以作为独立程序来编译的函数和数据类型的集合.之所以提供模块机制,是因为Linux本身是一个单内核.单内核由于所有内容都集成在一起,效率很高,但可扩展 ...
- 毕设之c#多线程学习(官方+转载)
官方文档,原址:打开 如何:对 Windows 窗体控件进行线程安全调用 使用多线程提高 Windows 窗体应用程序的性能时,必须注意以线程安全方式调用控件. 示例 访问 Windows 窗体控 ...
- ChangeSetenceSort(java)
package com.home.test; import java.util.Arrays; public class ChangeSort { public S ...
- Maven:The parent project must have a packaging type of POM
在Maven Project 执行 New Maven Modual时,提示错误:The parent project must have a packaging type of POM http:/ ...
- Oracle ORDS的简单SQL配置模板
1. 先加上简单的SQL配置模板. DECLARE PRAGMA AUTONOMOUS_TRANSACTION; BEGIN ORDS.ENABLE_SCHEMA(p_enabled => TR ...
- [转帖] infiniband的协议速度
- 深入理解 Laravel 中 config 配置加载原理
Laravel的配置加载其实就是加载config目录下所有文件配置.如何过使用php artisan config:cache则会把加载的配置合并到一个配置文件中,下次请求就不会再去加载config目 ...
- JavaScript中的Date对象在IOS中的“大坑”
在IOS5以上版本(不包含IOS5)中的Safari浏览器能正确解释出Javascript中的 new Date('2013-10-21') 的日期对象. 但是在IOS5版本里面的Safari解释ne ...
- matplotlib绘图2
fig=plt.figure() fig.add_subplot(3,3,1)#3行3列 第一个图 n=128 X=np.random.normal(0,1,n) Y=np.random.normal ...