如何在 material-ui@next (v1) 中使用自定义颜色答案

【问题标题】：How to use custom colors in material-ui@next (v1)如何在 material-ui@next (v1) 中使用自定义颜色
【发布时间】：2017-11-16 13:32:51
【问题描述】：

我正在尝试将主主题颜色值设置为自定义颜色（十六进制代码）。我找到了this，它说我需要将我的原色设置为那里提到的 JSON 对象。

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

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

【问题讨论】：

您查看过文档吗？ material-ui-next.com/style/color
我做了，但它并没有真正帮助 imo。即使使用Google's Color Tool，您也无法获得每种色调的准确值。
看起来文档有所帮助。很高兴你找到了答案。

标签： material-ui

【解决方案1】：

我使用this tool 创建了我的自定义颜色。您可以像这样直接在主题配置中使用它：

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
    })
};

【讨论】：