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';

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

关于此道具的更多信息，请参阅文档：Admin.loginPage

Answer 2

仅用于背景图片而不是其他内容：

https://marmelab.com/react-admin/Theming.html#using-a-custom-login-page你只需要：

import { Admin, Login } from 'react-admin';

const MyLoginPage = () => <Login backgroundImage="/background.jpg" />;

const App = () => (
    <Admin loginPage={MyLoginPage}>
    </Admin>
);

Answer 3

好吧，我在React Admin的问题中找到了这个解决方案

import React from 'react';
import { Login, LoginForm } from 'ra-ui-materialui';
import { withStyles } from '@material-ui/core/styles';

const styles = {
    login: {
        main: {
            backgroundImage: 'url(https://source.unsplash.com/1600x900/?traffic,road)',
        },
        card: {
            padding: '5px 0 15px 0',
        },
    },
    form: {
        button: {
            height: '3em',
        },
    },
};

const MyLoginForm = withStyles(styles.form)(LoginForm);

const MyLogin = (props) => (
    <Login loginForm={<MyLoginForm />} {...props} />
);

export default withStyles(styles.login)(MyLogin);

这是链接click here