Material UI Color Palette 获取自动生成阴影的十六进制代码答案

【问题标题】：Material UI Color Palette get hex code of auto generated shadesMaterial UI Color Palette 获取自动生成阴影的十六进制代码
【发布时间】：2020-07-14 13:12:38
【问题描述】：

我想在我的材质 UI 主题中使用我定义的颜色的不同深浅。我只定义了主色：

const theme = createMuiTheme({
    palette: {
        primary: {
            main: "#C5FFA1",
        },

对于某些用例，我需要其他主色的十六进制值。如何将自动生成的primary.dark 变量返回的rgb(...) 值转换为十六进制代码？我找不到任何解决方案。

import { useTheme } from '@material-ui/core/styles';
const theme = useTheme();
console.log(theme.palette.primary.main);
console.log(theme.palette.primary.dark);

返回这个

#D6F0FF
rgb(149, 168, 178)

但我需要这个：

#D6F0FF
#95a8b2

【问题讨论】：

标签： javascript reactjs material-ui

【解决方案1】：

我认为不是primary.main，而是尝试将primary设置为

primary:"#C5FFA1"

【讨论】：

感谢您的帮助，但这会引发错误 Error: Material-UI: The color provided to augmentColor(color) is invalid. The color object needs to have a main` 属性或 500 属性。`
这对我有用let theme = createMuiTheme({ palette: { primary: { main: "#006a4d", dark: "#006a4f" }, secondary: amber, }, })
感谢您的回复，但在此示例中，您明确设置了深色。 Material-UI 还创建了深色/浅色automatically。我的问题是如何获得这些自动颜色的十六进制颜色代码。
我认为 material-ui 不提供该功能。您需要指定要在应用程序中使用的所有颜色变化

【解决方案2】：

从“@material-ui/core”导入 { rgbToHex }；

const hex = rgbToHex("rgb(149, 168, 178)")

//@material-ui/core里面有一堆util函数，比如rgbToHex

// 完整列表：https://unpkg.com/browse/@material-ui/core@3.1.1/es/styles/colorManipulator.d.ts

【讨论】：