在Mpx RN 环境中使用原子类
Mpx 使用 unocss 作为原子类引擎，使得在使用 mpx 开发跨端项目也可以使用原子类。如果要在你的项目当中集成原子类的能力，具体操作请参照接入文档。
受限于 RN 平台的样式规则能力限制，绝大部分的 unocss 提供的原子类并不能在跨 RN 项目当中使用，以下是目前所支持的原子类：
对于不支持的原子类，在项目编译构建阶段会将不支持的原子类以 error 形式提示，且最终的编译产物当中不会产出对应的原子类结果
Typography
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Font family | 是 | |
| Font size | 是 | |
| Font style | 是 | |
| Font weight | 是 | |
| Font Variant Numberic | 否 | |
| Hyphens | 否 | |
| Letter spacing | 是 | |
| Line height | 是 | |
| Tab size | 否 | |
| Text alignment | 是 | |
| Text color | 是 | |
| Text decoration | 是 | |
| Text decoration style | 是 | ios 支持 安卓不支持 |
| Text decoration thickness | 否 | |
| Text underline offset | 否 | |
| Text decoration opacity | 是 | |
| Text indent | 否 | |
| Text opacity | 是 | |
| Text shadow | 是 | |
| Text stroke | 否 | |
| Text stroke color | 否 | |
| Text transform | 是 | |
| Vertical alignment | 是 | 安卓支持，ios 不支持，且只支持 auto/top/bottom/center |
| White space | 否 | |
| Word break | 否 | |
| Write mode | 否 | |
| Writing orientation | 否 |
Svg
不支持
Variants
- Screen Variants
Mobile First
| Varaint | 规则 | 备注 |
|---|---|---|
| sm | @media (min-width: 640px) | |
| md | @media (min-width: 768px) | |
| lg | @media (min-width: 1024px) | |
| xl | @media (min-width: 1280px) | |
| 2xl | @media (min-width: 1536px) |
Desktop First
| Varaint | 规则 | 备注 |
|---|---|---|
| <sm | @media (max-width: 640px) | |
| <md | @media (max-width: 768px) | |
| <lg | @media (max-width: 1024px) | |
| <xl | @media (max-width: 1280px) | |
| <2xl | @media (max-width: 1536px) |
Only Screen
| Varaint | 规则 | 备注 |
|---|---|---|
| @sm | @media (min-width: 640px) and (max-width: 768px) | |
| @md | @media (min-width: 768px) and (max-width: 1024px) | |
| @lg | @media (min-width: 1024px) and (max-width: 1280px) | |
| @xl | @media (min-width: 1280px) and (max-width: 1536px) | |
| @2xl | @media (min-width: 1536px) |
- Pseudo Elements
目前仅支持 hover
- Theme Variants
| Varaint | 规则 | 备注 |
|---|---|---|
| dark | 暗色模式 | |
| light | 亮色模式 |
- Orientation Variants
| Varaint | 规则 | 备注 |
|---|---|---|
| portrait | 竖屏 | |
| landscape | 横屏 |
Screen Readers
不支持
Animation
不支持
Transforms
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Transform Type | 是 | |
| Transform Origin | 是 | |
| Transform Rotate | 是 | |
| Transform Scale | 是 | |
| Transform Skew | 是 | |
| Transform Translate | 是 | |
| Perspective | 是 | |
| Perspective Origin | 是 |
Transitions
不支持
Background
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Background attachment | 否 | |
| Background clip | 否 | |
| Background color | 是 | |
| Background opacity | 是 | |
| Background position | 是 | 支持 left/right/top/bottom/center/数值 |
| Background repeat | 是 | 仅支持 no-repeat |
| Background size | 是 | |
| Background origin | 否 | |
| Background Image | 是 |
Gradients
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Gradient Direction | 是 | |
| Gradient From | 是 | |
| Gradient Via | 是 | |
| Gradient To | 是 |
Background Blend Mode
不支持
不支持
Box Decoration Break
不支持
Image Rendering
不支持
Listing
| 规则 | 是否支持 | 备注 |
|---|---|---|
| List style type | 否 | |
| List style position | 否 | |
| List style image | 否 |
Overflow
仅支持 hidden、scroll、visible 属性值
Overflow Behavior
不支持
Placeholder
不支持
Border
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Border radius | 是 | 不支持 border-inline-start、border-inline-end、border-block-start、border-block-end 属性，其他都支持 |
| Border width | 是 | |
| Border color | 是 | |
| Border opacity | 是 | |
| Border style | 是 | 不支持 double，hidden 样式，其他都支持 |
Divider
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Divider width | 否 | |
| Divider color | 否 | |
| Divider opacity | 否 | |
| Divider style | 否 |
Outline
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Outline Width | 是 | |
| Outline Color | 是 | |
| Outline solid | 是 | |
| Outline dotted | 是 |
Ring
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Ring width | 否 | |
| Ring color | 否 | |
| Ring opacity | 否 | |
| Ring offset width | 否 | |
| Ring offset color | 否 |
Box Shadow
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Box shadow size | 是 | |
| Box shadow color | 是 |
Opacity
支持
Mix Blend Mode
不支持
Filter
RN 0.76 支持，且存在机型的兼容性问题，具体参见 RN 官方文档
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Filter blur | 是 | |
| Filter brightness | 是 | |
| Filter contrast | 是 | |
| Filter drop shadow | 是 | |
| Filter grayscale | 是 | |
| Filter hue rotate | 是 | |
| Filter invert | 是 | |
| Filter saturate | 是 | |
| Filter Sepia | 是 |
Backdrop Filter
不支持
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Backdrop blur | 否 | |
| Backdrop brightness | 否 | |
| Backdrop contrast | 否 | |
| Backdrop drop shadow | 否 | |
| Backdrop grayscale | 否 | |
| Backdrop hue rotate | 否 | |
| Backdrop invert | 否 | |
| Backdrop saturate | 否 | |
| Backdrop Sepia | 否 |
Accent Color
不支持
Appearance
部分支持(backface-visible,backface-hidden)
Cursor
不支持，TextInput 有属性控制
Caret
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Caret Color | 否 | |
| Caret Opacity | 否 |
Pointer Events
部分支持(auto,none)
Resize
不支持
Scroll Behavior
不支持
Touch Action
不支持
User Select
支持(none,auto,all,text)
Will Change
不支持
Columns
不支持
Container
不支持
Display
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Block | 否 | |
| Inline Block | 否 | |
| Inline | 否 | |
| Flow Root | 否 | |
| Contents | 否 | |
| Hidden | 是 | |
| Visibility | 否 | |
| Visibility | 否 | |
| Backface Visibility | 否 | |
| List Item | 否 |
Flexbox
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Flex | 是 | |
| Flex Basis | 是 | |
| Inline Flex | 是 | |
| Flex Direction | 是 | |
| Flex Wrap | 是 | |
| Flex Stretch | 是 | |
| Flex Grow | 是 | |
| Flex Shrink | 是 |
Grid
不支持
Positioning
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Justify Content | 是 | 只支持(justify-around,justify-between,justify-center,justify-end,justify-evenly,justify-start) |
| Justify Items | 否 | |
| Justify Self | 否 | |
| Align Content | 是 | |
| Align Items | 是 | |
| Align Self | 是 | |
| Place Content | 否 | |
| Place Items | 否 | |
| Place Self | 否 | |
| Position | 是 | 只支持(absolute,relative) |
| Top / Right / Bottom / Left | 是 | |
| Floats | 否 | |
| Clear | 否 | |
| Isolation | 否 | |
| Object Fit | 否 | |
| Object Position | 否 | |
| Z-Index | 是 |
Sizing
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Width | 是 | |
| Min-Width | 是 | |
| Max-Width | 是 | |
| Min-Height | 是 | |
| Max-Height | 是 | |
| Box Sizing | 否 |
Spacing
| 规则 | 是否支持 | 备注 |
|---|---|---|
| Padding | 是 | |
| Padding Y | 是 | |
| Padding X | 是 | |
| Padding Top | 是 | |
| Padding Left | 是 | |
| Padding Bottom | 是 | |
| Padding Right | 是 | |
| Margin | 是 | |
| Margin Y | 是 | |
| Margin X | 是 | |
| Margin Top | 是 | |
| Margin Left | 是 | |
| Margin Bottom | 是 | |
| Margin Right | 是 | |
| Space Between Y | 否 | |
| Space Between Y Reverse | 否 | |
| Space Between X | 否 | |
| Space Between X Reverse | 否 |
Tables
不支持
RN 端颜色透明度写法约束
背景
unocss 默认实现为了支持「单色 utility + 独立 opacity utility」的组合（如 bg-red-500 + bg-opacity-50），会强制把颜色拆成两个 CSS 变量：
.bg-red-500 {
--un-bg-opacity: 1;
background-color: rgb(239 68 68 / var(--un-bg-opacity));
}
.bg-opacity-50 {
--un-bg-opacity: 0.5;
}在浏览器上这套机制几乎免费，但在 RN 端经由 mpx-runtime 解析时，会带来三块额外开销：
- 每个颜色 utility 多 1 个 styleObj key：从
{ backgroundColor }变成{ '--un-bg-opacity', backgroundColor }，key 数量翻倍。 - 运行时多一轮 cssVar 解析：
useTransformStyle中的varVisitor需要逐个组件实例扫描并替换var(--*)引用。 - layer 抽离开销：「全是
--un-*」的 utility 会被推到varUtilitieslayer，运行时多一次mergeToLayer合并。
实测在 1200 卡片的 perf 列表上，将颜色 utility 的 cssVar 全部 inline 后，__getStyle 总耗时下降明显（从 ~700ms 降到 ~140ms 量级，与 stylus 持平）。
为此 @mpxjs/unocss-base/preset-rn 在编译期通过 postprocess 把所有颜色类 utility 中的 var(--un-*-opacity) / shadow 颜色 var 等全部 inline 为字面量，并丢弃配套的 --un-*-opacity 声明行。这是一项对业务有感知的破坏性优化，本节说明影响面与迁移方法。
影响范围与迁移
依赖「跨 utility cssVar 合成」的体系（transform / filter / backdrop-filter / gradient / ring）通过白名单完整保留，业务原有写法不受影响：
<!-- ✅ 保持原样可用 -->
<view class="transform translate-x-2 rotate-45 scale-110" />
<view class="filter blur-sm brightness-110 contrast-125" />
<view class="bg-gradient-to-r from-blue-500 to-purple-500" />实际需要业务改写的只有「颜色 + 独立 opacity utility」组合一种场景。请改用 unocss 原生的 /{alpha} 斜杠语法（Web / RN 双端一致）：
| 之前的写法（已不再生效） | 现在的写法 |
|---|---|
bg-red-500 bg-opacity-50 | bg-red-500/50 |
text-blue-600 text-opacity-30 | text-blue-600/30 |
border-gray-300 border-opacity-50 | border-gray-300/50 |
触发逻辑：独立
*-opacity-{n}utility 在 unocss 中只产出一行--un-*-opacity: <n>声明。该声明在 postprocess 中被剥离后 utility entries 为空，className 自然失效。
斜杠语法同样适用于其他颜色类（如
bg-red-500/30、shadow-black/20），同色字面量 + alpha 通道直接内嵌为rgba(...)，运行时零开销。
渲染等价性
| className | 改造前 | 改造后 |
|---|---|---|
bg-red-500 | rgba(239,68,68,1) | rgba(239,68,68,1) ≡ 同色 |
bg-red-500/50 | rgba(239,68,68,0.5) | rgba(239,68,68,0.5) ≡ 同色 |
bg-red-500 bg-opacity-50 | rgba(239,68,68,0.5) | rgba(239,68,68,1)（opacity utility 失效） |
shadow-md | shadowColor #000 alpha 0.1 | 同 |
迁移完成后，所有颜色相关 utility 在产物中均为字面值字符串，运行时不再有 cssVar 解析与 varUtilities layer 合并开销。