我想在react-admin
中使用一张图片作为登录页面的背景图片,我该怎么做?
附言:我正在使用TypeScript
发布于 2018-06-21 22:15:38
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
发布于 2019-04-23 03:18:33
仅为背景图像,没有其他内容:
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>
);
发布于 2018-08-07 23:28:40
我在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
https://stackoverflow.com/questions/50946945
复制相似问题