如何在 MudBlazor 主题调色板中使用 TextPrimary、TextSecondary 颜色值

Question

我正在使用 MudBlazor，它提供了一种通过定义 MudTheme 来管理主题的方法。例如

MudTheme MyCustomTheme = new MudTheme()
{
  Palette = new Palette()
  {
     Primary = Colors.Blue.Default,
     Secondary = Colors.Blue.Default,
     AppbarBackground = "#FFFFFF",
     TextPrimary = "#000000",
     TextSecondary = "#FFFFFF",
  }
};

设置TextPrimary颜色会将提供的值设置为 scss 变量--mud-palette-text-primary，但不会将其应用于MudText组件。

问题：我正在设置TextPrimary和TextSecondaryin Palette，但是当我使用 MudBlazor 文本组件时，它不会应用我提供的颜色。

<MudText Typo="Typo.h5">Application</MudText>

注意： MudText 有一个 Color 属性，它接受Color enum值但Color enum没有TextPrimaryValue。

ColorMudBlazor 提供的枚举

public enum Color
    {
        Default = 0,
        Primary = 1,
        Secondary = 2,
        Tertiary = 3,
        Info = 4,
        Success = 5,
        Warning = 6,
        Error = 7,
        Dark = 8,
        Transparent = 9,
        Inherit = 10,
        Surface = 11
    }

另外，如果我像这样将颜色设置为主要颜色

<MudText Typo="Typo.h5" Color="Color.Primary">Application</MudText>

它根据我传递的参数应用CSS类.mud-primary-text或.mud-secondary-text，但在这些类中它们使用--mud-palette-primary或--mud-palette-secondaryscss变量而不是--mud-palette-primary-text or--mud-palette-辅助文本`

.mud-primary-text {
    color: var(--mud-palette-primary) !important; // it should use --mud-palette-primary-text 
}

.mud-secondary-text {
    color: var(--mud-palette-secondary) !important; // it should use --mud-palette-secondary-text 
}

起初，我认为通过将Color字段设置为Primary MudText component将使用TextPrimary值，而其他组件将使用Primary值，因此我创建了一个可能修复的 PR，但他们拒绝了它，因为设计就是这样。你可以在这里查看https://github.com/MudBlazor/MudBlazor/pull/4451。

现在我已经通过覆盖类解决了这个问题。

.mud-primary-text {
    color: var(--mud-palette-text-primary) !important;
}

.mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}

现在这是一个错误还是我的误解？对我来说看起来像一个错误。

注意调试后我发现，如果您使用 HTML 标题或段落标签，它将应用调色板中定义的颜色，但如果使用 MudText 组件，它将不起作用，因为它应用.mud-primary-text设置颜色的类，--mud-palette-primary因此解决此问题的方法是覆盖类并将颜色设置为正确的 scss 变量，就像我上面展示的那样。

Answer 1

现在，我已经通过下面的 css 行解决了这个问题

.mud-primary-text {
    color: var(--mud-palette-text-primary) !important;
}

.mud-secondary-text {
    color: var(--mud-palette-text-secondary) !important;
}