如何使用 Material UI 覆盖放大主题

Question

我正在使用 Material-UI 和 Amplify UI Components 编写 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 覆盖放大主题？

Answer 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 进行样式设置。

PS 可能不希望你想听，但FWIW我拉出了一个codesandbox并亲自尝试了它，但无法让它工作。我还尝试了此处的解决方案自定义 AWS Amplify UI? 似乎新组件@aws-amplify/ui-react不接受样式aws-amplify-react。