I am currently developing a React application with Material-UI and Amplify UI Components. I am looking to customize the Amplify theming.
By following the guidance provided on Amplify UI Components Customization, I have been able to override CSS variables in a separate custom CSS file.
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);
}
This custom CSS file can then be imported into my application.
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);
However, I would like to streamline the process by overriding the Amplify theming within the same location where I define the Material-UI theme.
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;
Is there a way to seamlessly override Amplify theming with Material-UI?