Emotion Snippets for React是由iJS开发的专为React应用设计的Emotion.js代码片段工具,旨在让您的编码过程更加高效和有趣。我们非常感谢您尝试使用这款工具,希望它能在您的开发过程中带来便利和乐趣。
即将推出动画功能,敬请期待!
我们热烈欢迎您的pull request,共同完善和提升Emotion Snippets。
安装步骤:
支持的语言及文件扩展名:
Emotion.js代码片段内容:
我们提供了丰富的Emotion.js代码片段,每个片段都有特定的触发器(以⇥表示TAB键):
触发器 | 内容 |
---|---|
ecss → | 声明一个emotion css样式变量 |
ecn → | 创建带渲染属性的ClassNames HOC |
eobjcss → | 声明带对象样式的emotion css样式变量 |
eusthm → | 使用emotion-theming的useTheme()声明主题 |
imecn → | 从@emotion/core导入ClassNames |
imecss → | 从@emotion/core导入css |
imej → | 导入emotion jsx属性 |
imejcss → | 导入emotion jsx和css属性 |
imesc → | 从emotion/styled导入styled(需要安装包) |
imeusthm → | 从emotion-theming导入useTheme(需要安装包) |
sc → | 声明styled组件 |
scw → | 声明用styled组件包装的自定义组件 |
我们会持续添加更多代码片段,敬请关注!
展开的代码片段示例:
import { ClassNames } from "@emotion/core";
import { css } from "@emotion/core";
// 以下注释行是必需的,它告诉babel如何正确转换
/** @jsx jsx */
import { jsx } from "@emotion/core";
// 以下注释行是必需的,它告诉babel如何正确转换
/** @jsx jsx */
import { jsx, css } from "@emotion/core";
import styled from "@emotion/styled";
import { useTheme } from "emotion-theming";
const style| = css`
|
`;
const objectStyles| = css({
|
})
const theme = useTheme();
const sc| = styled.div`
|
`;
const sc| = styled(CustomComp|)`
|
`;
发布说明:
[1.1.2] - 2020年3月4日
[1.1.1] - 2020年3月4日
[1.1.0] - 2020年3月4日
[1.0.2] - 2020年3月4日
[1.0.1] - 2020年3月3日
[1.0.0] - 2020年3月3日
祝您使用愉快! Scott Agirs
本站所有资源都是由网友投稿发布,或转载各大下载站, 请自行检测软件的完整性!
本站所有资源仅供学习与参考,请勿用于商业用途,否则 产生的一切后果将由您自己承担!
如有侵权请联系我们删除下架,联系方式:study_golang@163.com