Mpx 框架

外观

在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)
  • Interaction Variants

RN 不支持 hover:、active:、focus:、visited: 等最终生成 pseudo selector 的交互 variant。包括 hover: 在内，这类产物会在 RN 编译阶段作为 error 上报，且不会生成对应的 class 样式。其他不生成非支持选择器的 variant 能力不受影响。

需要按下态时，使用 Mpx 内建组件的 hover-class 指向普通原子类：

html
<view class="bg-white" hover-class="bg-blue-500/10"></view>
  • 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 ​

支持单属性及逗号分隔的多属性 transition，例如 transition-opacity、transition-transform、transition-colors 和多属性任意值；其中每个属性都必须处于 Mpx2RN transition 支持范围内。RN preset 会屏蔽生成 transition-property: all 的 transition、transition-\d+、transition-all、transition-all-\d+。

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是支持 box-border、box-content

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 变量：

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 解析时，会带来三块额外开销：

  1. 每个颜色 utility 多 1 个 styleObj key：从 { backgroundColor } 变成 { '--un-bg-opacity', backgroundColor }，key 数量翻倍。
  2. 运行时多一轮 cssVar 解析：useTransformStyle 中的 varVisitor 需要逐个组件实例扫描并替换 var(--*) 引用。
  3. layer 抽离开销：「全是 --un-*」的 utility 会被推到 varUtilities layer，运行时多一次 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）通过白名单完整保留，业务原有写法不受影响：

html
<!-- ✅ 保持原样可用 -->
<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-50bg-red-500/50
text-blue-600 text-opacity-30text-blue-600/30
border-gray-300 border-opacity-50border-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-500rgba(239,68,68,1)rgba(239,68,68,1) ≡ 同色
bg-red-500/50rgba(239,68,68,0.5)rgba(239,68,68,0.5) ≡ 同色
bg-red-500 bg-opacity-50rgba(239,68,68,0.5)rgba(239,68,68,1)（opacity utility 失效）
shadow-mdshadowColor #000 alpha 0.1同

迁移完成后，所有颜色相关 utility 在产物中均为字面值字符串，运行时不再有 cssVar 解析与 varUtilities layer 合并开销。