Как создать вариант цвета из базового цвета в пользовательском интерфейсе React Material?

Question

В моей теме есть заданная цветовая константа, скажем, '# FFBA60'.

Я хочу использовать функции пользовательского интерфейса React Material для получения из этого базового c цвета нескольких других. (скажем, один ярче на 30% и один темнее на 10%).

Есть ли функция для этого? (что-то вроде в Sass brighten('#FFBA60,30%))

Answer 1

Тема material-ui делает это сама, вам просто нужно передать основной цвет, и он вычисляет другие цвета с основным цветом в качестве основы. Вот пример из документации:

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
  palette: {
    primary: {
      // light: will be calculated from palette.primary.main,
      main: '#ff4400',
      // dark: will be calculated from palette.primary.main,
      // contrastText: will be calculated to contrast with palette.primary.main
    },
    secondary: {
      light: '#0066ff',
      main: '#0044ff',
      // dark: will be calculated from palette.secondary.main,
      contrastText: '#ffcc00',
    },
    // Used by `getContrastText()` to maximize the contrast between
    // the background and the text.
    contrastThreshold: 3,
    // Used by the functions below to shift a color's luminance by approximately
    // two indexes within its tonal palette.
    // E.g., shift from Red 500 to Red 300 or Red 700.
    tonalOffset: 0.2,
  },
});

Здесь ссылка на документацию

Если вы пытаетесь сгенерировать цвета для пользовательского свойства, функция theme.palette.augmentColor() , с ним вы можете настроить параметры тоже. Здесь ссылка для кода со всеми атрибутами, которые он принимает

Пример CodeSandbox (просто передача основного цвета)

Answer 2

В материале-интерфейсе / стилях есть функция затемнения.

import { darken } from '@material-ui/core/styles';
const darkenedColor50Percent = darken('#4f4', 0.5);