【问题标题】：How to override Amplify theming with Material UI如何使用 Material UI 覆盖 Amplify 主题
【发布时间】：2021-02-02 15:58:10
【问题描述】：

我正在使用 Material-UI 和 Amplify UI 组件编写一个 React 应用程序。我想覆盖 Amplify 主题。

我可以成功地按照Amplify UI Components Customization 上的解决方案覆盖自定义 CSS 文件中的 CSS 变量。

CustomCss.css
-------------
:root {
  --amplify-primary-tint: rgba(89, 210, 188, 1);
  --amplify-primary-color: rgba(20, 160, 140, 1);
  --amplify-primary-shade: rgba(0, 113, 95, 1);
}

然后，我可以将该文件导入到我的应用中。

App.js
------
import React from 'react';
import { CssBaseline } from '@material-ui/core';
import { ThemeProvider } from '@material-ui/core/styles';
import { withAuthenticator } from '@aws-amplify/ui-react';
import theme from "./theme";
import './CustomCss.css';

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      ...
    </ThemeProvider>
  );
}

export default withAuthenticator(App);

但是，我更愿意在定义 Material-UI 主题的同一位置覆盖 Amplify 主题。

theme.js
--------
import { createMuiTheme } from '@material-ui/core/styles'

export const theme = createMuiTheme({
  'palette': {
    'primary': {
      'light': 'rgba(89, 210, 188, 1)',
      'main': 'rgba(20, 160, 140, 1)',
      'dark': 'rgba(0, 113, 95, 1)',
    },
  },
});

export default theme;

有没有办法用 Material-UI 覆盖 Amplify 主题？

【问题讨论】：

标签： css reactjs material-ui aws-amplify

【解决方案1】：

没有

见https://github.com/aws-amplify/docs/issues/2484

简而言之，有人提出功能请求：

像 aws-amplify-react 一样支持主题对象。

他们给出的对于较新的@aws-amplify/ui-react 版本不起作用的示例是：

const MyTheme = {
   formSection: { 'display': 'none' }
}

// define class App { ... }

export default withAuthenticator(App, { theme: MyTheme })

据我了解，新的 amplify 组件不通过 JS 对象进行样式设置，目前只有 CSS，因为问题仍然存在。

附：可能不想让你听到，但是 FWIW 我拿出了一个密码箱并自己尝试了它，但无法让它工作。我也在这里尝试了Customise AWS Amplify UI? 的解决方案，似乎@aws-amplify/ui-react 的新组件不像aws-amplify-react 那样接受样式。

【讨论】：