如何在材质ui@next (v1) 中使用自定义颜色

Question

我正在尝试将主要主题颜色值设置为自定义颜色(十六进制代码(。我发现这个说我需要将我的主要颜色设置为那里提到的 JSON 对象。

这对我来说没有意义，为什么我必须自己构建这样的对象？将(例如，当给定十六进制值时(转换为 HSL 并根据需要调整色调值不是更有意义吗？当然是在库内，所以我只需要传递一个十六进制值。

我的第二个问题是，为什么这个 JSON 对象的值高于 360 度？据我了解，这些值代表了 HSL 色彩空间的色调值......

Answer 1

我使用此工具创建了自定义颜色。您可以直接在主题配置中使用它，如下所示：

import createPalette from 'material-ui/styles/createPalette';
export const blue = {
    50: '#e8eaf6',
    100: '#c5cbe9',
    200: '#9fa8da',
    300: '#7985cb',
    400: '#5c6bc0',
    500: '#3f51b5',
    600: '#394aae',
    700: '#3140a5',
    800: '#29379d',
    900: '#1b278d',
    A100: '#c6cbff',
    A200: '#939dff',
    A400: '#606eff',
    A700: '#4757ff',
    'contrastDefaultColor': 'light',
};
export default {
    palette: createPalette({
        primary: blue
    })
};