material-ui - 使用除主要、次要和错误之外的其他调色板

Question

我可以创建一个主题并像这样替换默认调色板:

const theme = createMuiTheme({
    primary: {
        main: '#aa2222',
    },
    extra: {
        main: '#22aa22',
    },
});

这会自动设置 theme.primary.light 和 theme.primary.dark。但是，它不会为 extra 对象设置等效的明暗值。

有没有一种方法可以在无需手动计算 RGB 值的情况下为 extra 等自定义元素执行此操作？还是我仅限于自动计算 primary、secondary 和 error？

Answer 1

解决了这个问题。这被添加到上述问题的代码末尾:

theme.palette.augmentColor(theme.palette.extra, 500, 300, 700);

三个数字参数是 mainShade、lightShade 和 darkShade 值。这些是用于默认调色板的:

augmentColor(primary, 500, 300, 700);
augmentColor(secondary, 'A400', 'A200', 'A700');
augmentColor(error, 500, 300, 700);

我认为它们在那里，因此您可以调整颜色变亮或变暗的程度，以防默认设置的可读性不够。