如何在 Material UI 中通过 SX 访问主题颜色

Question

如何通过使用访问主题的颜色sx？我在下面尝试过，但它不起作用。

<Card
  sx={{
    border: "2px solid primary.main",
  }}
>

Answer 1

作为替代方案，您应该能够执行以下操作：

<Card sx={{border: "2px solid", borderColor: "primary.main"}}>

简写“边框”似乎无法正确访问主题颜色。希望这有帮助。

更新：只是想补充一点，您还可以使用函数值根据您的主题设置边框颜色。

    <Card sx={{border: "2px solid", borderColor: (theme) => theme.palette.primary.main}}>

Answer 2

我想更深入地了解蒂姆上面的回答。首先，这里有一些关于sx属性本身的文档，您还应该熟悉主题对象。

但也许更好的起点是了解有两种方法可以通过属性访问主题颜色sx：

1. 隐式（对于主题可映射 CSS 属性）
2. 显式（使用函数回调）

隐式（对于主题可映射 CSS 属性）

<Card
  sx={{
    borderColor: 'primary.main'
  }}
>

那么这到底是如何/为什么起作用的呢？此页面记录了您可以使用的所有样式属性sx（此外您可以使用任何 CSS 属性）以及它们是否/如何与主题链接。首先，这意味着并非所有属性都链接到主题。如果您查看属性参考表，最后一列（“主题映射”）会告诉您属性是否/如何链接到主题对象。让我们看一下该参考表的屏幕截图：

在底部，您可以看到该display属性未链接到主题对象。但是，在顶部附近，您可以看到该borderColor属性链接到主题对象，并且链接描述为theme.palette[value]。这意味着您赋予它的值可以是该theme.palette对象的属性。现在让我们看一下默认主题对象，看看我们可以传递哪些值：

我们可以看到该theme.palette对象包含一系列属性，例如common、、 等，在这些属性下面，您可以获得实际的颜色值，例如primary，即#1976d2。总而言之，当我们指定 a of时，那就是获取 的值。从技术上讲，我们甚至可以指定一个不适合边框颜色的属性，例如- 这将给出边框颜色。secondarymainborderColorprimary.maintheme.palette.primary.maintheme.palettedividerrgba(0, 0, 0, 0.12)

显式（使用函数回调）

您还可以传递函数回调，它使您可以显式访问主题基础对象，然后您可以使用主题对象的任何属性返回所需的任何值。例如，通过这种方式，我们可以一次性指定所有边框属性，如下所示：

<Card
  sx={{
    border: (theme) => `2px solid ${theme.palette.primary.main}`,
  }}
>