Material UI：通过 SASS 变量更改主题颜色答案

【问题标题】：Material UI: Change theme color by SASS variablesMaterial UI：通过 SASS 变量更改主题颜色
【发布时间】：2019-03-05 15:55:30
【问题描述】：

我知道我们可以编辑material UI 的主题，但我正在考虑让它动态化，我们可以在其中设置 SASS 变量，它会自动更新 Material UI 主题。

我使用 sass 来设计我的页面，这是我使用的变量示例：

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

目前我对材质 ui 按钮执行以下操作，因为我希望我的设计尽可能在一个地方

.app-button-blue {
  background-color: $primary-color !important; 
  margin: 5px;
}

.app-button-gray {
  background: transparent !important;
  box-shadow: none !important;
}

.app-button-white {
  background: transparent !important;
  box-shadow: none !important;
  border: $primary-color solid 1px !important;
}

有没有办法让我使用这个 SASS 变量来覆盖材质 ui 的主题 - 比如设置主要颜色和次要颜色？

【问题讨论】：

您能否阐明使主题动态化的意思。
@LukePeavey，我更新了我的问题。希望它可以帮助您理解我的问题！谢谢:)
酷，我再看看

标签： reactjs sass material-ui themes

【解决方案1】：

Material UI 使用基于 javascript 的样式解决方案 (JSS)，而不是像 SCSS 这样的 CSS 预处理器（请参阅 style solution）。

这意味着无法通过 SCSS 变量自定义 Material UI 主题。也无法访问您的 CSS/SCSS 样式中的主题。

如果您想使用 SCSS 进行样式/主题化，您可以考虑使用Material Web Components。

【讨论】：

可以在 Reactjs 中使用 Material Web Components 吗？
@SamYC ReactJs 并不关心您如何将样式传递给组件。您可以使用 css、scss、jss 或其他技术为 reactjs 制作的 html 提供样式
Material-UI 使用基于 JS 的样式，但也可以轻松操作。 material-ui.com/customization/components 在那里检查代码示例。有makeStyles。 makeStyles 内部的代码类似于 scss。甚至可以使用 '&:hover' 和类似的。

【解决方案2】：

可以使用Webpack wizadry从 Sass/Scss 变量填充 MaterialUI 主题

调色板.scss

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

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

主题.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 从一个真实来源为您的非 Material UI 和 Material UI 组件设置样式和颜色

要设置其他组件的样式，只需使用 Sass 导入

@import './palette.scss'

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

【讨论】：

【解决方案3】：

一个示例on this GitHub issue 建议您如何做到这一点。

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 内部初始化。

【讨论】：

【解决方案4】：

这可能不是您想要实现的，但下面的文章解释了如何导出 SASS 变量。 https://til.hashrocket.com/posts/sxbrscjuqu-share-scss-variables-with-javascript 之后您可以在 JS 中导入这些并使用它们来设置您的主题。

【讨论】：

【解决方案5】：

有一种方法可以在 JS 端定义主题变量并在 CSS 端使用它们来保持单一事实来源并允许动态主题切换 .您可以查看我在 MUI GitHub 存储库上发布的the solution。

【讨论】：