Material UI - Utilizing multiple CSS classes within a unified global theme

Exploring the world of Material UI within React for the first time has been an exciting journey. I am currently looking to customize my global theme, specifically targeting two classes:

.MuiListItem-root.Mui-selected, .MuiListItem-root.Mui-selected:hover {
    background-color: rgba(0, 0, 0, 0.08);
}

I am wondering how I can select and modify these classes using createMuiTheme. I attempted the following approach without success:

createMuiTheme({
  overrides: {
    MuiListItem: {
      root: {
        Mui: {
          selected: {
            backgroundColor: "black",
            "&:hover": {
              backgroundColor: "blue",
            },
          },
        },
      },
    },
  }
})

Your insights and guidance on this matter would be greatly appreciated.

cssreactjsmaterial-ui

Answer №1

Below is the corrected syntax:

const customizedTheme = createMuiTheme({
  overrides: {
    MuiListItem: {
      root: {
        "&.Mui-selected": {
          backgroundColor: "black",
          "&:hover": {
            backgroundColor: "blue"
          }
        }
      }
    }
  }
});

https://codesandbox.io/s/style-selected-list-item-49xsc?fontsize=14&hidenavigation=1&theme=dark

An alternative approach is as follows:

const customizedTheme = createMuiTheme({
  overrides: {
    MuiListItem: {
      root: {
        "&$selected": {
          backgroundColor: "black",
          "& :hover": {
            backgroundColor: "blue"
          }
        }
      }
    }
  }
});

https://codesandbox.io/s/style-selected-list-item-forked-pww4f?fontsize=14&hidenavigation=1&theme=dark

Answer №2

Give this code a shot:

createMuiTheme({
    overrides: {
        MuiListItem: {
            root: {
                '&$selected': {
                    backgroundColor: "black"
                },
                '&$selected:hover'{
                    backgroundColor: "blue"
                }
            },
        },
    },
})

Check out this response for more insights.

Answer №3

When using Material UI, you can utilize the Mui-selected classes for global styling adjustments across specific elements.

For precise targeting based on the documentation, focus on modifying the MuiListItem classes as shown below:

createMuiTheme({
  overrides: {
    MuiListItem: {
      selected: {
        backgroundColor: "black",
        "&:hover": {
          backgroundColor: "blue",
        },
      },
    },
  }
})

It seems that this approach is no longer effective in the latest version of Material UI. The ListItem component's source code now defines it like this:

  root: {
    '&$selected, &$selected:hover': {
      backgroundColor: theme.palette.action.selected,
    },
    ...
  }

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

Add the retrieved information from an API fetch request to the state variable

Below is a function that runs another function inside a forEach loop: async populateSystemData(id) { const response = await fetch('https://localhost:44389/api/systemlist/GetSystems/' + id); const data = await response.json(); const r ...

reactjsecmascript-6

Enhancing the background of a website with the power of CSS

I am looking to create a customized table without the balls/pots in it. The number of rows on the y-axis will vary depending on the number of names I have, and can be more or less. The values on the x-axis are determined by a parameter included in the URL ...

javascriptjqueryhtmlcss

I attempted to start a new React application, but I continue to encounter an error. Despite attempting to clear the cache using npm and uninstalling create-react-app globally, the issue persists. Is there

screenshot of the error message in my terminal following the execution of (npx create-react-app) ...

reactjsnpm

Avoiding leaps through the use of dynamic pictures?

Currently, I am implementing the picture element along with srcset to download the same image but in varying resolutions depending on the screen size of the device. The image has a style of max-width: 100%, causing it to shift the content below when downl ...

javascripthtmlcss

How can we add styles to text entered into a form input field in a targeted way?

Is there a way to apply styling to the second word entered into a form input text field after the user hits "enter" and the data is output? In this scenario, the text always follows the format of 3 numbers, followed by a space, and then a name. For examp ...

javascriptjqueryhtmlcssforms

The radio button element could not be located using the attribute "checked="Checked""

While working with Geb, I encountered an issue using the code div.find("input","checked":contains("checked")). This is the snippet of code I attempted to use in order to locate the checked radio button on a webpage. However, I received an error when using ...

javascripthtmlcssseleniumgeb

Guide on updating the default screen background color for all pages in React JS (Next JS) with the help of tailwind CSS

How can I change the default screen background color for all pages within my web application? Here are the technologies I've used: React JS Next JS Tailwind CSS I would like to set the screen background color of all pages to a light grey shade, as ...

javascriptreactjsnext.jsfrontendtailwind-css

The 'slide.bs.carousel' event in Bootstrap carousel is triggered just once

Take a look at my JavaScript code: $('#carousel-container').bind("slide.bs.carousel", function () { //reset the slideImg $('.slideImg',this).css('min-height', ''); //set the height of the slider var ...

javascriptjqueryhtmlcsstwitter-bootstrap

Unable to rectify the installed npm module issue

I removed the @toast-ui/react-image-editor package from my react app's server side thinking it needed to be on the client side. After installing it on the client side and restarting the app, it could not be found. Here is a basic overview of my folde ...

node.jsreactjsnpmtoast-ui-image-editor

Is there a way to optimize the re-rendering and redownloading of images files in map() when the useState changes? Perhaps we can consider using useMemo

This Chat application is designed with channels similar to the Slack App. Currently, I am utilizing a map() function for filtering within an array containing all channel data. The issue arises when switching between channels, resulting in re-rendering and ...

javascriptreactjsnext.jsreact-hooks

What is the best approach to concurrently update a single array from multiple functions?

In my React app, I have a form with various input fields and checkboxes. Before making an API call to submit the data, I have functions set up to check if any fields are left blank or unchecked. These check functions are triggered when the form button is ...

javascriptreactjsarrays

What is the best way to customize the color of the border and icon in an outlined MaterialUI input field

I'm a newcomer to materialUI and I have a question regarding customizing an outlined input field with an icon. Due to my dark background, I need the icon, border, and text color to be lighter, such as grey. Can someone please advise on the materialUI ...

cssreactjsmaterial-ui

Styling tips for dragging items outside the Droppable area in react-beautiful-dnd

I am seeking ways to enhance the style of the dragging item when it is dragged outside of the Dragale component. Currently, changing the cursor CSS to "all-scroll" only impacts the drag inside the Dragale component, not outside of it. Visit this link for ...

reactjsreact-beautiful-dnd

What could be causing the issue of CSS Styles not being applied to an Angular 2 component with Vaadin elements?

Currently, I am immersed in the tutorial on Vaadin elements using Angular 2 that I stumbled upon here In section 5.3, Styles are applied to the app.component.ts as shown below import { Component } from [email protected]/core'; @Component({ select ...

htmlcssangulartypescriptvaadin

Problem with ngStyle: Error indicating that the expected '}' is missing

I encountered an error in the Chrome console when trying to interpret the code below: <div [ngStyle]="{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat&ap ...

javascripthtmlcssangulartypescript

Having trouble importing DropDown and MenuButton components from materialUI Joy

As I attempt to create a simple menu dropdown using Dropdown and MenuButton from the MaterialUI Joy library, I encountered an issue. After installing the library, I could not locate the DropDown and MenuButton folders within the 'joy' directory i ...

reactjsnpmimportmaterial-uifrontend

What are the steps for building a React Web application that is linked to Mongo and Node, displaying streaks, badges, and more?

I'm currently working on an application that will feature popup badges to reward users for completing tasks. For instance, a streak badge would appear if a user watches 3 videos in a row. How can I track these accomplishments and trigger the validatio ...

node.jsreactjsmongodbexpress

Creating a dynamic route with a parameter in NextJS that maps to a specific page

Currently, I'm developing a NextJS application and implementing Static HTML Export to make it a Jamstack app. I'm facing an issue while setting up dynamic routes that depend on a username parameter included in the route: localhost:3000/:username ...

reactjsnext.jsnetlifyjamstack

Most effective method for displaying 100 images on a single page?

I have a webpage on my site that displays 100 images, but loading them one at a time makes it look unattractive. Is there a way to make it more elegant and visually appealing? ...

javascripthtmlcss

How can ReactJS and Python share information with each other?

I am currently developing an application that requires data communication between ReactJS and Python. My primary focus right now is on the React part of the communication. Initially, I thought about using JSON for data exchange but found it challenging t ...

pythonjsonreactjs