Question

在实质性UI中，我们使用自定义主题。说我们在某个地方：

const theme = createMuiTheme({
    palette: {
        primary: {
            main: '#ED1C24'
        },
    },
});

现在作为背景，我希望对此有一个“模糊”版本，例如默认颜色。

使用默认颜色可以做到：

import * as React from "react"
import red from '@material-ui/core/colors/red';

function SomeComponent() {        
    const theme = useTheme();
    const shadedColor = red.A100;
    return <div style={{backgroundColor: shadedColor}}>hello world</div>
}

我还可以使用我们的原色，例如：

import * as React from "react"
import red from '@material-ui/core/colors/red';

function SomeComponent() {        
    const theme = useTheme();
    const shadedColor = theme.palette.primary.main;
    return <div style={{backgroundColor: shadedColor}}>hello world</div>
}

但是如何获得该主要颜色的不同阴影？

Answer 1

您可以添加不同版本的原色，例如：

palette: {
    primary: {
        main: '#ED1C24'
        light: '#ED1C25',
        dark: '#ED1C26'
    },
},

获取自定义材质UI主题原色的不同阴影？

1 个答案: