如何用材质UI覆盖放大主题

Question

我正在使用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主题?

Answer 1

不

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

简而言之，有人向:

提出特性请求。

• 支持主题对象，如法律-放大-反应。

他们给出的不工作的例子对于较新的@aws-amplify/ui-react版本是:

const MyTheme = {
formSection: { 'display': 'none' }
}
// define class App { ... }
export default withAuthenticator(App, { theme: MyTheme })

据我所知，新的amplify组件不会通过JS对象进行样式化，目前只能通过CSS进行样式化，因为这个问题还没有解决。

注:可能不想让你听到，但我自己打开了一个代码沙箱，试了试，但没能让它工作。我还尝试了以下解决方案:自定义AWS Amplify UI?而且@aws-amplify/ui-react的新组件似乎不像aws-amplify-react那样接受样式。