styled-jsx
styled-jsx是一个支持jsx方式编写的css-in-js插件
安装
npm install --save styled-jsx
在babel的plugins中配置styled-jsx/babe
{
"plugins": [
"styled-jsx/babel"
]
如果用了next.js不用写上面的配置, 因为next.js中已经默认引入了styled-jsx插件
使用
export default () => (
<div>
<p>only this paragraph will get the style :)</p>
<style jsx>{`
p {
color: red;
}
`}</style>
</div>
)