I want to use a image to be put in as background image of login page in react-admin
how can I do this ?
P.S: I'm using TypeScript
TypeScript Support This is probably the most requested and the most visible feature: starting with version 3.9, react-admin exports TypeScript types. Let's first reiterate one important fact: react-admin is and will remain a JavaScript library.
The ImageBackground component lets you display an image as the background of another component in Expo and React Native apps. For example, you can set the background image of a screen in your app with ImageBackground inside the screen's container view.
export default App; Output: Method 5: Add background image from src/ folder If the image resides inside the src directory, the user can import it inside the component filer and set it as the background image. In this file, we will import the image and set it as a background image of the div element.
The Admin
component have a loginPage
prop. You can pass a custom component in that.
Here is an example, create your LoginPage component:
// 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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With