reactjs - react-admin 登录页面中的背景图片

Question

我想在 react-admin 中使用一张图片作为登录页面的背景图片，我该怎么做？

P.S: 我正在使用 TypeScript

Answer 1

Admin 组件有一个 loginPage 属性。您可以在其中传递自定义组件。

这是一个示例，创建您的 LoginPage 组件:

// LoginPage.js
import React from 'react';
import { Login, LoginForm } from 'react-admin';
import { withStyles } from '@material-ui/core/styles';

const styles = ({
    main: { background: '#333' },
    avatar: {
        background: 'url(//cdn.example.com/background.jpg)',
        backgroundRepeat: 'no-repeat',
        backgroundSize: 'contain',
        height: 80,
    },
    icon: { display: 'none' },
});

const CustomLoginForm = withStyles({
    button: { background: '#F15922' },
})(LoginForm);

const CustomLoginPage = props => (
    <Login
        loginForm={<CustomLoginForm />}
        {...props}
    />
);

export default withStyles(styles)(CustomLoginPage);

并在您的管理员中使用它:

// App.js
import { Admin } from 'react-admin';
import LoginPage from './LoginPage';

export default const App = () => (
    <Admin
        loginPage={LoginPage}
        {...props}
    >
        {resources}
    </Admin>
);

文档中有关此 Prop 的更多信息:Admin.loginPage