@ 蚂蚁设计/ csinjs
组件级别 csinjs 溶液用于 蚂蚁设计它是一个子集 情感 带有设计符号逻辑包装. 请随意直接使用情感 如果你想找到一个网络csinjs解决方案。 cssinjs 相关 Dep 软件包 :
- 样式
- @emotion/ hash (英语)
- @ emotion/ 无单位
现场直播
https://ant-design.github.io/csinjs/ (中文(简体) )
安装
npm install @ant-design/cssinjs
或者说
yarn add @ant-design/cssinjs
pnpm add @ant-design/cssinjs
发展
npm install
npm start
许可证
@ant-design/csinjs根据麻省理工学院的许可发布.
API 密码
样式提供
| Prop | 国家 | 类型 | 默认 |
|---|---|---|---|
| 自动清除 | 删除组件时清除注入样式元素 . | 布尔 | 虚假 |
| 缓存 | 配置 csinjs 缓存实体 。 只有在您需要 sr 自行提取样式时才设置 . | 缓存实体 | - 说吧 |
| 优先级 | 使用 :where 减少散列Id css 选择器优先级的选择器 | 'low' | 'high' | 'low' |
| 集装箱 | 告诉Cssinjs在哪里注入样式. | 元素QQ 阴影旋转 | document.head |
| srInline 语录 | 组件导出内置 <style /> 在苏维埃社会主义共和国后退。 不建议. | 布尔 | 虚假 |
| 变压器 | 在文档中注入前先转换 cs 。 请注意: transformers 不支持动态更新 | 变形器 [] | - 说吧 |
创建缓存
返回样式提供的缓存实体.
创建主题
创建主题对象 。 当提供同一算法时,它将返回同一对象.
设计 切换相关的 API
自兹 @ant-design/cssinjs 对缓存命中性能使用强烈的限制,我们建议查看演示 basic.tsx 用于 animation.tsx 用于动画使用.
提取样式
从缓存取出样式,然后以字符串的形式返回.
参数
cache(Cache):包含样式的缓存实例.options(对象QQ布尔,可选): 提取样式的选项 .plain(布尔,可选): 如果选中的话, 样式将以简单格式返回 。 默认是虚假的.types(字符串 [],可选): 取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取取的取取取取取取取取取取取取取取取取取 默认为 ['style','tken','cssVar'].
回返
- (字符串):被提取的样式为字符串.
示例
import { extractStyle, createCache } from '@ant-design/cssinjs';
// 创建并填充缓存
const cache = createCache();
// 注意：在实际使用中，缓存通常会在渲染组件时自动填充
// 提取样式
const styles = extractStyle(cache, { plain: true, types: ['style', 'token'] });
// 使用提取的样式
const styleElement = document.createElement('style');
styleElement.innerHTML = styles;
document.head.appendChild(styleElement);
变形
当您需要转换 CSS Object 在插入样式前 。 你用得着 transformers 处理此事项:
import {
legacyLogicalPropertiesTransformer,
StyleProvider,
} from '@ant-design/cssinjs';
export default () => (
<StyleProvider transformers={[legacyLogicalPropertiesTransformer]}>
<MyApp />
</StyleProvider>
);
以下是我们提供的转变:
传统工艺
将逻辑属性转换为遗留属性 。 譬如说. marginBlockStart 改为 marginTop数字 :
- 设置
- 边距
- 粘贴
- 边框
px2rem 转换器
将像素单位转换为雷姆单位. px2rem 转换器. options