颜色反转

Joy UI 组件可以反转其颜色以匹配父组件的变体。

动机

Joy UI 的 全局变体特性 为 variant 属性提供了一致的值集。但是，当相同的样式应用于父组件和子组件时，这些变体有时会导致奇怪的现象。查看下面的两个演示卡片，了解事情可能会如何出错

• 在左侧，按钮变体为 solid，而其父卡片为默认的 outlined，因此设计效果良好。
• 在右侧，solid 变体应用于按钮和卡片，破坏了设计的层次结构和对比度。

Joy UI 的颜色反转功能可以防止这种情况发生，同时仍然保留全局变体本身的层次含义。

概述

当在父组件上启用颜色反转时，所有子组件都会反转其样式（无论其各自的颜色属性如何）以匹配父组件的背景。反转的样式保持了其相应全局变体的语义含义——在下面的示例中，即使按钮已被反转以与其容器形成对比，它仍然是 solid。如果您将按钮的变体更改为 outlined，您会看到设计仍然有效；但尝试从父卡片中删除 invertedColors 属性，您会看到设计如何崩溃（因此，为什么此功能如此有用）

优势

• 颜色反转减少了大量的样式设置工作。它处理所有子组件上的所有视觉状态（悬停、激活和焦点）。
• 它使您的界面可扩展。添加到该区域的新组件将立即生效。
• 它适用于客户端和服务端渲染。
• 它适用于亮色和暗色模式。
• 可以随时禁用它，而不会影响组件的结构。
• 这是一个选择加入功能。如果您不使用它，则额外的 CSS 变量将不会包含在生产样式表中。
• 某些子组件可以排除在颜色反转之外，请参阅 “跳过子组件上的颜色反转” 部分。

权衡

• 如果父组件仅包含少量子组件，则生成的样式表大小可能明显大于单独自定义每个子组件的情况。（这对于整体性能可能无关紧要。）
• 它不适用于不支持 CSS 变量的浏览器。

用法

支持的组件

以下组件在与 solid 或 soft 变体结合使用时接受 invertedColors 属性

• Alert
• Card
• Drawer
• Modal Dialog
• Menu
• Sheet

例外情况

默认情况下，颜色反转不会影响 Autocomplete、Menu 或 Tooltip 组件的弹出槽。要启用它，请使用子组件上的 slotProps 将 disablePortal 设置为 "true"，如下所示

跳过子组件上的反转

当 invertedColors 应用于父组件时，您可以将 data-skip-inverted-colors 属性添加到子组件以防止该子组件被反转。

将颜色反转应用于任何父组件

import { applySolidInversion, applySoftInversion } from '@mui/joy/colorInversion';

如果您需要颜色反转用于 默认不支持 的父组件，则可以使用 applySolidInversion 或 applySoftInversion 实用程序将其添加到任何包含子组件的组件。（这是支持的组件在应用 invertedColors 属性时在幕后使用的。）

下面的示例演示了如何将这些实用程序与 sx 属性和 styled API 一起使用

使用 sx 属性

<Box sx={[{ ...baseStyles }, applySolidInversion('neutral')]}>...</Box>

使用 styled API

const Parent = styled('div')([{ ...baseStyles }, applySolidInversion('neutral')]);

工作原理

颜色反转使用 invertedColors 属性或 apply 实用程序将 CSS 变量添加到组件。此功能不涉及 React context。

<Sheet invertedColors variant="solid" color="neutral">

// The parent's style sheet
{
  // the values of these variables depends on the parent's variant and color.
  --variant-softColor: …;
  --variant-softBg: …;
  --variant-softHoverColor: …;
  --variant-softHoverBg: …;
  --variant-softActiveBg: …;
  … // other variants
  --joy-palette-text-primary: …;
  --joy-palette-text-secondary: …;
  --joy-palette-text-tertiary: …;
  --joy-palette-background-surface: …;
  … // other theme palette tokens
}

因此，子组件将使用这些 CSS 变量而不是主题

// The children style sheet
// The values of these variables are inherited from the parent.
{
  color: var(--joy-palette-text-primary);
  background: var(--joy-palette-background-surface);
  …
}

常见示例

页眉

页脚

侧边导航

营销部分