Поддержка градиента непосредственно в настройках темы в Material-UI

Question

Прямо сейчас мы можем настроить тему в material-ui следующим образом.

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

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff4400'
    },
    secondary: {
      light: '#0066ff',
      main: '#0044ff',
      contrastText: '#ffcc00',
    },
    // error: will use the default color
  },
});

Есть ли способ предоставить градиентную конфигурацию для основного и дополнительного цветов? ИМХО тонкие градиенты дают лучшие цветовые оттенки и делают плоские цвета немного менее скучными

Answer 1

Вы можете установить значения градиента внутри вашей темы:

const theme = createMuiTheme({
  palette: {
    primary: {
      main: '#ff4400',
      mainGradient: "linear-gradient(to right, tomato, cyan)",
    },
    // ...
  },
});

А затем используйте это значение внутри компонентов style prop:

<AppBar
  position="static"
  style={{ background: theme.palette.primary.mainGradient }}
> ...

EDIT

Это действительно кажется хакерским, но я считаю, что это единственный способ на данный момент. Я не нашел никаких примеров этого в документах MUI. И если вы посмотрите на источник компонента <AppBar />, вы обнаружите, что невозможно использовать main, light или dark цвета в качестве линейных градиентов:

export const styles = theme => {
  //...

  return {
    /* ... */

    /* Styles applied to the root element if `color="primary"`. */
    colorPrimary: {
      backgroundColor: theme.palette.primary.main, 
      color: theme.palette.primary.contrastText,
    },
    /* Styles applied to the root element if `color="secondary"`. */
    colorSecondary: {
      backgroundColor: theme.palette.secondary.main,
      color: theme.palette.secondary.contrastText,
    },
  };
};

Как видите, здесь используется backgroundColor. Было бы неверно установить linear-gradient(...) на него.