CSS-IN-JS Emotion

为什么会有css-in-js

优点
缺点

使用emotion插件库

javascript 复制代码
npm i @emotion/core @emotion/styled

使用时需要解析css属性

使用方式一: 通过注释告诉babel不讲jsx转化为react.create Element的调用,而是转化为jsx语法。会导致一个警告react未使用。

使用方式二:通过Babel配置

通过create-react-app创建的项目需要弹出配置。弹出前需要先commit代码

下载Babel插件@emotion/babel-preset-css-prop

emotion使用介绍

css用法


child.js

parent.js

javascript 复制代码
import styled from '@emotion/styled';




添加样式的时候会默认给组件添加一个className的属性。









相关推荐
難釋懷5 分钟前
JavaScript基础-移动端常用开发框架
开发语言·javascript
碧海饮冰1 小时前
前端:v-html和v-text在使用上的区别
前端·javascript·html
CD-i1 小时前
用HTML.CSS.JavaScript实现一个贪吃蛇小游戏
javascript·css·html
好_快1 小时前
Lodash源码阅读-cloneBuffer
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-initCloneArray
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-get
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-stringToPath
前端·javascript·源码阅读
好_快1 小时前
Lodash源码阅读-baseGet
前端·javascript·源码阅读
前端极客探险家2 小时前
如何用 Three.js 和 Vue 3 实现 3D 商品展示
javascript·vue.js·3d
我是小路路呀3 小时前
vue开始时间小于结束时间,时间格式:年月日时分
前端·javascript·vue.js