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的属性。









相关推荐
王哲晓30 分钟前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
理想不理想v35 分钟前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云1 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
aPurpleBerry2 小时前
JS常用数组方法 reduce filter find forEach
javascript
ZL不懂前端2 小时前
Content Security Policy (CSP)
前端·javascript·面试
乐闻x2 小时前
ESLint 使用教程(一):从零配置 ESLint
javascript·eslint
我血条子呢3 小时前
[Vue]防止路由重复跳转
前端·javascript·vue.js
半开半落3 小时前
nuxt3安装pinia报错500[vite-node] [ERR_LOAD_URL]问题解决
前端·javascript·vue.js·nuxt
理想不理想v3 小时前
vue经典前端面试题
前端·javascript·vue.js