react-admin 登录页面中的背景图片
Background image in react-admin Login page
我想使用一张图片作为登录页面的背景图片 react-admin
我该怎么做?
P.S:我正在使用 TypeScript
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>
);
文档中有关此道具的更多信息:Admin.loginPage
好吧,我在 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);
这是linkclick here
仅需一张背景图片即可:
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>
);
我想使用一张图片作为登录页面的背景图片 react-admin
我该怎么做?
P.S:我正在使用 TypeScript
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>
);
文档中有关此道具的更多信息:Admin.loginPage
好吧,我在 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);
这是linkclick here
仅需一张背景图片即可:
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>
);