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

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 样式相关的任何潜在辅助方法。

• 如果您使用 Ctrl+F 搜索“light”，是否有此提交将palette.type更改为palette.mode 'light'? 还是'dark'? ，你会看到他们还使用三元运算符来分配基于dark的colors | light模式，所以我怀疑他们有任何帮助方法，就像你在第二个片段中描述的那样。