免费的免抠图素材网站,网站推广的几个阶段,网站建设方面的书籍,crntos wordpress简介
Emotion 是一个专为使用 JavaScript 编写 css 样式而设计的库。它提供了强大且可预测的样式组合#xff0c;以及源映射、标签和测试实用程序等功能为开发人员提供了出色的体验#xff0c;并且支持字符串和对象样式。
与框架无关的样式应用包
Emotion中提供了一个与框…简介
Emotion 是一个专为使用 JavaScript 编写 css 样式而设计的库。它提供了强大且可预测的样式组合以及源映射、标签和测试实用程序等功能为开发人员提供了出色的体验并且支持字符串和对象样式。
与框架无关的样式应用包
Emotion中提供了一个与框架无关的样式应用包emotion/css 这是使用 Emotion的最简单的方法应用这个包无需关心CSS的相关适配问题。我们只需要用 css 函数生成类名并编写样式就行了。
安装
npm i emotion/css示例
import { css } from emotion/cssconst color whiterender(divclassName{csspadding: 32px;background-color: hotpink;font-size: 24px;border-radius: 4px;:hover {color: ${color};}}Hover 示例/div
)试试看上面的示例当鼠标悬停在Div 上时的颜色变化
适用React下的应用包
npm i emotion/react示例
import { css } from emotion/reactconst color whiterender(divcss{csspadding: 32px;background-color: hotpink;font-size: 24px;border-radius: 4px;:hover {color: ${color};}}Hover to change color./div
)还可以使用 styled 样式包, 比如在MUI就是使用的这个包。
npm i emotion/styled emotion/react --save示例
import styled from emotion/styledconst Button styled.buttonpadding: 32px;background-color: hotpink;font-size: 24px;border-radius: 4px;color: black;font-weight: bold;:hover {color: white;}
render(ButtonThis my button component./Button)总结
上面讲了多种使用 Emotion的方法如果你使用的是 React最简单的入门方法是使用 emotion/react 包。如果你不使用 React你应该使用 emotion/css 包。
