Пользовательский интерфейс материала: изменение цвета темы с помощью переменных SASS

Пользовательский интерфейс материала использует решение стиля на основе javascript (JSS) вместо препроцессора CSS, такого как SCSS (см. стилевое решение).

Это означает, что невозможно настроить тему пользовательского интерфейса материала с помощью переменных SCSS. Также невозможно получить доступ к теме в ваших стилях CSS / SCSS.

Если вы хотите использовать SCSS для стилизации / тематики, вы можете вместо этого рассмотреть Материальные веб-компоненты.

Возможно, это не совсем то, чего вы хотели достичь, но в следующей статье объясняется, как можно экспортировать переменные SASS. https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript Впоследствии вы можете импортировать их в JS и использовать их для настройки своей темы.

Пример по этой проблеме GitHub подсказывает, как это можно сделать.

import React from 'react';
import { withStyles } from '@material-ui/core';

const cssVariables = (theme) => ({
  '@global': {
    ':root': {
      '--color-primary': theme.palette.primary.main,
      '--color-secondary': theme.palette.secondary.main,
    }
  }
});

const RootComponent = () => {
  return <div>Whatever...</div>
}

export default withStyles(cssVariables, RootComponent);

Имея в виду, что RootComponent инициализируется внутри ThemeProvider.

Можно заполнить тему MaterialUI из переменных Sass / Scss, используя Webpack wizadry

palette.scss

$primary: #1E79C7;
$secondary: #E5681A;

:export {
  primary: $primary;
  secondary: $secondary;
}

theme.js

import { createMuiTheme } from '@material-ui/core/styles'
import palette from './palette.scss'

export const theme = createMuiTheme({
  palette: {
    primary: {
      main: palette.primary,
    },
    secondary: {
      main: palette.secondary,
    },
  }
})

App.js

import React from 'react'
import { ThemeProvider } from '@material-ui/core/styles'
import { theme } from './theme'

export const App = () => {
  return (
    <ThemeProvider theme = {theme}>
       // App
    </ThemeProvider>
  )
}

Это означает, что вы можете использовать Sass для стилизации и раскрашивания компонентов пользовательского интерфейса, не являющегося материальным, и пользовательского интерфейса материала из одного источника правды.

Чтобы стилизовать другие компоненты, просто используйте импорт Sass

@import './palette.scss'

.app-button-blue {
  background-color: $primary; // removed !important cos there's usually a better way
  margin: 5px;
}