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









相关推荐
前端Hardy几秒前
纯HTML&CSS实现3D旋转地球
前端·javascript·css·3d·html
susu10830189113 分钟前
vue3中父div设置display flex,2个子div重叠
前端·javascript·vue.js
小镇程序员3 小时前
vue2 src_Todolist全局总线事件版本
前端·javascript·vue.js
疯狂的沙粒3 小时前
对 TypeScript 中函数如何更好的理解及使用?与 JavaScript 函数有哪些区别?
前端·javascript·typescript
瑞雨溪3 小时前
AJAX的基本使用
前端·javascript·ajax
力透键背3 小时前
display: none和visibility: hidden的区别
开发语言·前端·javascript
程楠楠&M4 小时前
node.js第三方Express 框架
前端·javascript·node.js·express
weiabc4 小时前
学习electron
javascript·学习·electron
想自律的露西西★4 小时前
用el-scrollbar实现滚动条,拖动滚动条可以滚动,但是通过鼠标滑轮却无效
前端·javascript·css·vue.js·elementui·前端框架·html5
白墨阳4 小时前
vue3:瀑布流
前端·javascript·vue.js