关于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 ...
随机推荐
- BugkuCTF web3
前言 写了这么久的web题,算是把它基础部分都刷完了一遍,以下的几天将持续更新BugkuCTF WEB部分的题解,为了不影响阅读,所以每道题的题解都以单独一篇文章的形式发表,感谢大家一直以来的支持和理 ...
- Jumpserver双机高可用环境部署笔记
之前在IDC部署了Jumpserver堡垒机环境,作为登陆线上服务器的统一入口.后面运行一段时间后,发现Jumpserver服务器的CPU负载使用率高达80%以上,主要是python程序对CPU的消耗 ...
- Python-习题-11
1,内容回顾列表:增 append insert extend 删 remove pop clear del 改 li[索引] = '被修改的内容' li[切片]:'被修改的内容' 查 for循环 r ...
- qa_model
[code=python] import os import sys import time import numpy import shelve import theano import thean ...
- Linux内核读书笔记第六周
主要内容: 什么是调度 调度实现原理 Linux上调度实现的方法 调度相关的系统调用 什么是调度 现在的操作系统都是多任务的,为了能让更多的任务能同时在系统上更好的运行,需要一个管理程序来管理计算机上 ...
- sql 语句的先后执行顺序
例:查询语句中select from where group by having order by的执行顺序 一般以为会按照逻辑思维执行,为: 查询中用到的关键词主要包含六个,并且他们的顺序依次为 ...
- 【转】STM32和ARM的区别
转自:http://www.cnblogs.com/nuc-boy/archive/2012/09/11/2680157.html 这个问题大概2009年的时候很多人就在问,请看09年的时候大家给出的 ...
- org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause: com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure The last packet sent succ
数据库 没有开启 连接失败 org.apache.ibatis.exceptions.PersistenceException: ### Error querying database. Cause ...
- PHP和JavaScript将字符串转换为数字string2int
在看廖雪峰的JavaScript教程时,里面有一个题就是利用reduce()将string转换为int,我看评论中贴出的方法,当时觉得挺意外了,以为他只用了一行代码,即下面这行代码 var str=& ...
- RocketMQ事务消息实战
我们以一个订单流转流程来举例,例如订单子系统创建订单,需要将订单数据下发到其他子系统(与第三方系统对接)这个场景,我们通常会将两个系统进行解耦,不直接使用服务调用的方式进行交互.其业务实现步骤通常为: ...