Получить различные оттенки основного материала пользовательского интерфейса темы основного цвета?

Question

В пользовательском интерфейсе материала мы используем собственную тему. Скажем, у нас есть где-то:

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

Теперь для фона у меня sh будет "слабая" версия этого, как для цветов по умолчанию.

В цвете по умолчанию можно было бы сделать:

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'
    },
},