How can the backgroundImage css in react admin <Login /> be replaced using Material-UI?

I have been refering to the following resources:

Instead of using a preset background, I want to modify the CSS styles property located in 

ra-ui-materialui/src/auth/Login.tsx
which currently includes:

const useStyles = makeStyles(
    (theme: Theme) => ({
        main: {
            backgroundImage: 'radial-gradient(circle at 50% 14em, #313264 0%, #00023b 60%, #00023b 100%)',
        },
    }),
    { name: 'RaLogin' }
);

As per Material-UI documentation (https://material-ui.com/customization/components/#global-theme-override), it can be customized like this:

import { createMuiTheme } from '@material-ui/core/styles';
import pink from '@material-ui/core/colors/pink';

/**
 * @public
 * @name theme
 * @description
 * Application material ui main theme, read more at https://material-ui.com
 * It is used to configure the spacings, colors, fonts and components of the application
 * @type {object}
 */
const theme = createMuiTheme({
  overrides: {
    RaLogin: {
      main: {
            backgroundImage: 'radial-gradient(circle at 50% 14em, #ff0000 0%, #ff0000 60%, #ff0000 100%)',
      },
    }
  },
});

The React-Admin documentation explains how to implement an image by passing the props backgroundImage to <Login />, but my requirement is different.

Is there a way to edit the login background in Material-UI/React-Admin?

javascriptcssreactjsmaterial-uireact-admin

Answer №1

This code snippet has proven to be successful for me:

const customStyles = makeStyles(theme => ({
  main: {
    background: 'radial-gradient(circle at 50% 14em, #313264 0%, #00023b 60%, #00023b 100%)', 
  },
}))

const LoginForm = props => {
  const styles = customStyles()
  return <Login styles={styles} backgroundImg="" {...props} />
}

const MainApp = () => (
  <Admin
    loginForm={LoginForm}
    ...

  </Admin>
)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Checking JavaScript files with TSLint

After spending many hours attempting to make this work, I still haven't had any success... I am wondering: How can I utilize TSLint for a .js file? The reason behind this is my effort to create the best possible IDE for developing numerous JavaScrip ...

javascripttypescriptvisual-studio-codejshinttslint

Tips for adjusting the position of an infowindow in ArcGIS

I have implemented the use of infowindow in arcgis to display certain information. https://i.sstatic.net/Dnpas.jpg Currently, the infowindow is appearing directly over my icon. Is there a way to adjust its position if it covers the icon? ...

javascriptarcgisarcgis-js-api

How can I ensure the end of the list is clearly visible?

I'm experiencing an issue where the last element in my list is getting cut off. When I check the console logs, I can see that it's rendering properly. If I remove the 'position: fixed' style, I can see the element at the bottom of the l ...

cssreactjstypescript

React-router-dom combines the URLs without triggering any rendering

Just starting out with React-router-dom 6^4 library and running into a bit of trouble. I have already set up two simple components (Log In Form and Sign Up Form) using the c-r-a template. According to the documentation, I need to create an instance of Brow ...

reactjsreact-router

What is the best way to display the JSON data?

<!DOCTYPE HTML> <html> <head> <title></title> <link href="/bundles/hoaxpartner/css/style.css" type="text/css" rel="stylesheet" /> </head> <body> <div id="header">Backbone</div> &l ...

javascriptjsonbackbone.js

The CSS border-image feature seems to be malfunctioning on Opera browser

I've been trying to implement border images in my application using CSS, but unfortunately, it doesn't seem to be working in Opera. Does anyone know how I can get Opera to support this feature? ...

csscross-browseropera

Undefined values in Javascript arrays

Currently, I am sending a JSON object back to a JavaScript array. The data in the array is correct (I verified this using Firebug's console.debug() feature), but when I try to access the data within the array, it shows as undefined. Below is the func ...

javascriptjqueryarraysjson

When using PHP code, the col-md-4 divs are positioned vertically instead of horizontally

I have written PHP code that seems to be working correctly, but the "col-md-4" divs are not aligning next to each other as expected. Instead, they appear one below the other. Could someone please assist me in identifying what I may have done incorrectly? ...

phphtmlcssbootstrap-4

jQuery divs seem to "gaze up" towards the mouse pointer

I am attempting to recreate a fascinating effect using jQuery - where "cards" move in response to the mouse cursor as if they are looking up at it. I have come across a script that almost achieves what I need, but I require the ability to control the mov ...

javascriptjquerycss

Importing a React component from a separate file

Currently utilizing the React Material-UI library, I am faced with a challenge in implementing a search 'filter' on the main/parent page that should trigger a Drawer component located in a separate file. While I grasp the concept of how this fun ...

reactjsrxjsreact-routermaterial-ui

Ionic app encounters issue fetching local JSON data

I have been working on my Ionic application and I encountered an issue when trying to load local JSON data into it. I set up a http.get in my javascript to retrieve the data, but for some reason it's not showing up in the application. It seems like th ...

javascripthtmljsonionic-framework

Having trouble with the Moment.js diff function in your React Native project?

Within my React Native application, I have implemented Moment.js and included the following code snippet: const expDate = moment(new Date(val)).format('MM-DD-YYYY'); const nowDate = moment().format('MM-DD-YYYY'); const diff = nowDate.d ...

javascriptnode.jsreactjsreact-nativemomentjs

Activate scroll function exclusively upon hovering over specific object

I am working on a page with an object that allows users to zoom in and out. I want to create a special zoom function that will be triggered when the user scrolls while their cursor is hovering over this object. If the cursor moves away from the object, th ...

javascripthtmlscroll

Tips for transferring an image file through formdata to a React/Next.js api

I am attempting to upload an image file to a cloudinary API within a Next.js application: The function calling the API is as follows: async uploadButtonClicked(imageUpload) { const formData = new FormData(); //formData.append('test', ...

reactjsnext.jsvercel

What is the process of using AJAX, JavaScript, and HTML to submit data to a remote

I need help with sending data from an HTML page to a server. I have a JSON example below that illustrates what I want to achieve. On my HTML page, I have a question label and four options (A, B, C, D) as radio buttons. After clicking the send button, I ...

javascriptjqueryajax

Determine whether a specific text is contained within a given string

Can someone help me determine if a specific text is included in a string? For example, I have a string str = "car, bicycle, bus" and another string str2 = "car" I need to verify if str2 exists within str. I'm new to JavaScript so I appreciate you ...

javascript

Angular Bootstrap-Select: Displaying options even after selection

There seems to be a bug in the angular bootstrap select demo section. After selecting an option, the dropdown continues to display options instead of hiding them. This issue does not occur when the ng-model attribute is omitted. You can view an EXAMPLE he ...

javascriptangularjstwitter-bootstrap-3bootstrap-selectangular-bootstrap

What is the best way to properly upload data during a WS event?

When the server sends an event to every client in a specific room upon message submission by other clients, it triggers a reload of messages so they can view the new message. The React client receives the message correctly, but there is a peculiar issue wi ...

node.jsreactjsreduxaxiossocket.io

Adding a Unique Variant to Material-UI Component in React/ Typescript

I am currently working on creating a customized component inspired by Material-ui components but with unique styles added. For instance, the Tab component offers variants such as ["standard","scrollable","fullWidth"], and I want to include 'outline ...

reactjstypescriptmaterial-ui

The DatePicker is limited to only displaying the current month and year

When using the DatePickerField to input DOB, this is how it looks: <DatePickerField name={dateOfBirth.name} label={dateOfBirth.label} format="dd/mm/yy" views={['date' ...

reactjsmaterial-ui