使用主要，次要和错误之外的其他调色板

Question

我可以创建一个主题并替换默认调色板，如下所示：

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

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

有没有办法为extra等自定义元素执行此操作，而无需手动计算RGB值？或者我仅限于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);

我认为它们在那里，所以你可以调整颜色变暗或变暗的程度，以防默认值不够可读。