Material-UI : How to replace backgroundImage css in react admin <Login />?

0
votes

I am reading the following documentation :

I do not want to use a background, I want to edit the css styles property in ra-ui-materialui/src/auth/Login.tsx which use:

const useStyles = makeStyles(
    (theme: Theme) => ({
        main: {
            backgroundImage: 'radial-gradient(circle at 50% 14em, #313264 0%, #00023b 60%, #00023b 100%)',
        },
    }),
    { name: 'RaLogin' }
);

According to mui documentation (https://material-ui.com/customization/components/#global-theme-override), it should be overridable like this:

import { createMuiTheme } from '@material-ui/core/styles';
import pink from '@material-ui/core/colors/pink';

/**
 * @public
 * @name theme
 * @description
 * Application material ui main theme, read more at https://material-ui.com
 * It is used to configure the spacings, colors, fonts and components of the application
 * @type {object}
 */
const theme = createMuiTheme({
  overrides: {
    RaLogin: {
      main: {
            backgroundImage: 'radial-gradient(circle at 50% 14em, #ff0000 0%, #ff0000 60%, #ff0000 100%)',
      },
    }
  },
});

React-Admin documentation show how to use an image by passing the props backgroundImage to <Login />, but that's not what I need.

How can I edit the logging background in Material-UI/React-Admin ?

1
javascriptcssreactjsmaterial-uireact-admin

1 Answers

1
votes

This option works for me:

const useStyles = makeStyles(theme => ({
  main: {
    background: 'radial-gradient(circle at 50% 14em, #313264 0%, #00023b 60%, #00023b 100%)', 
  },
}))

const LoginPage = props => {
  const classes = useStyles()
  return <Login classes={classes} backgroundImage="" {...props} />
}

const App = () => (
  <Admin
    loginPage={LoginPage}
    ...

  </Admin>
)