Question

我想将一些基于 theme.type 的图标的颜色覆盖为原生 PaletteColor。我可以检查 type 并有条件地设置这样的颜色：

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    someIcon: {
      color:
        theme.palette.type === "dark"
          ? theme.palette.warning.dark
          : theme.palette.warning.light,
    },
  })
);

尽管每次我想覆盖某些内容时，这都非常冗长，因此可以将其重构为下面的 themeColor：

const themeColor = (theme: Theme, color: PaletteColor) =>
  theme.palette.type === "dark"
    ? color.dark
    : color.light;

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    someIcon: {
      color: themeColor(theme, theme.palette.warning)
    },
  })
);

现在让我想到的是，Material-UI 是否有一些已经做到这一点的本机助手？

Answer 1

我在 Material-UI 源代码中挖掘了一段时间，这是我发现的：

您可以看到与 Material-UI 样式 here 相关的任何潜在辅助方法。
有this commit把palette.type改为palette.mode，如果你Ctrl+F搜索'light' ?或'dark' ?，你会看到他们还使用三元运算符根据 dark | 分配颜色light 模式，所以我怀疑他们是否有任何辅助方法，如您在第二个代码段中描述的那样。

在深色/浅色样式覆盖之间切换

1 个答案: