How to override Amplify theming with Material UI

Question

I am writing a React app using Material-UI and Amplify UI Components. I want to override the Amplify theming.

I can successfully follow the solution on Amplify UI Components Customization to override CSS variables in a 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);
}

Then, I can import that file into my app.

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 prefer to override the Amplify theming in the same place that I define my 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 any way to override Amplify theming with Material-UI?

Answer 1

No

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

In short, someone is making a feature request to:

• support theme object as aws-amplify-react does.

The example they give that is not working for the newer @aws-amplify/ui-react release is:

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

// define class App { ... }

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

From what I understand, the new amplify components do not take styling through JS objects, only CSS as of now, given the issue that's still open.

P.S. probably not want you want to hear, but FWIW I pulled up a codesandbox and tried it myself and could not get it to work. I also attempted the solution here Customise AWS Amplify UI? and it seems like the new components from @aws-amplify/ui-react don't accept styles as aws-amplify-react does.