颜色不透明度修饰符

每个颜色相关的样式属性都可以使用color-mix 快捷方式来为颜色应用不透明度。

语法

通用语法是 {color}/{opacity}。例如：bg="red.300/40"。

用法

<Text bg="red.300/40" color="white">
  Hello World
</Text>

这将生成类似以下内容

.css-sxdf {
  --mix-background: color-mix(in srgb, var(--colors-red-300) 40%, transparent);
  background: var(--mix-background, var(--colors-red-300));
  color: var(--colors-white);
}

CSS 变量

此功能也可以在 CSS 变量中使用。这对于在组件中创建一次性颜色令牌非常有用。

令牌引用语法 {} 是此功能正常工作的必要条件。

<Box css={{ "--bg": "{colors.red.400/40}" }}>
  <Text>Hello World</Text>
  <Box bg="var(--bg)" />
</Box>