Material-UI : 如何在 react admin <Login /> 中替换 backgroundImage css？

Question

我正在阅读以下文档：

React-Admin自定义登录后台：https://marmelab.com/react-admin/Theming.html#using-a-custom-login-page
Material-UI自定义主题：https://material-ui.com/customization/components/

我不想使用背景，我想编辑 ra-ui-materialui/src/auth/Login.tsx 中的 css 样式属性，它使用：

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

根据 mui 文档 (https://material-ui.com/customization/components/#global-theme-override)，它应该像这样可以覆盖：

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 文档展示了如何通过将道具 backgroundImage 传递给 <Login /> 来使用图像，但这不是我需要的。

如何在 Material-UI/React-Admin 中编辑日志背景？

Answer 1

这个选项适合我：

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>
)

Material-UI : 如何在 react admin <Login /> 中替换 backgroundImage css？

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

javascript

css

reactjs

material-ui

react-admin