[英]Background image in react-admin Login page
I want to use a image to be put in as background image of login page in react-admin
how can I do this ?我想在react-admin
使用一张图片作为登录页面的背景图片,我该怎么做?
PS: I'm using TypeScript
PS:我正在使用TypeScript
The Admin
component have a loginPage
prop. Admin
组件有一个loginPage
道具。 You can pass a custom component in that.您可以在其中传递自定义组件。
Here is an example, create your LoginPage component:这是一个示例,创建您的 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);
And use it in your Admin:并在您的管理员中使用它:
// App.js
import { Admin } from 'react-admin';
import LoginPage from './LoginPage';
export default const App = () => (
<Admin
loginPage={LoginPage}
{...props}
>
{resources}
</Admin>
);
More infos about this prop in the documentation: Admin.loginPage
文档中有关此道具的更多信息: Admin.loginPage
For just a background image and nothing else:仅用于背景图像,仅此而已:
https://marmelab.com/react-admin/Theming.html#using-a-custom-login-page you only need: 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>
);
Well, I find this solution in React Admin's issues好吧,我在 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);
This is link click here这是链接点击这里
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.