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









相关推荐
周之鸥17 分钟前
使用 Electron 打包可执行文件和资源:完整实战教程
前端·javascript·electron
前端snow41 分钟前
前端全栈第二课:用typeorm向数据库添加数据---一对多关系
前端·javascript
全栈老李技术面试1 小时前
【高频考点精讲】async/await原理剖析:Generator和Promise的完美结合
前端·javascript·css·vue·html·react·面试题
kadog1 小时前
PubMed PDF下载 cloudpmc-viewer-pow逆向
前端·javascript·人工智能·爬虫·pdf
fxshy2 小时前
ai聊天流式响应,阻塞式和流式响应 nginx遇到的坑
运维·javascript·nginx
这颗橘子不太甜QAQ2 小时前
Husky使用技巧
javascript·git·代码规范
장숙혜2 小时前
ElementUi的tabs样式太难修改,自定义tabs标签页
前端·javascript
火星思想3 小时前
Promise 核心知识点(非基础)
前端·javascript·面试
前端大白话3 小时前
炸裂!10个 React 实战技巧,让你的代码从“青铜”秒变“王者”
前端·javascript·react.js
10年前端老司机3 小时前
微信小程序模板语法和事件
前端·javascript·微信小程序