Is it possible to customize the MUI CSS for a specific menu item using the sx prop?

How can I apply the MenuItemStyle to the sx prop of a MenuItem using:

const MenuItemStyle = {
  '&:hover': {
    backgroundColor: `${theme.color.secondaryHover}`,
  },
  '&:selected, &:selected:hover': {
    backgroundColor: `${theme.color.secondaryHover}`,
  },
  '&:focusVisible': {
    backgroundColor: `${theme.color.secondaryHover}`,
  },
}

This is how I am trying to include it in my code:

<MenuItem key={method} value={method} sx={MenuItemStyle}>
              <Checkbox style={CheckboxStyle} checked={value.indexOf(method) > -1} />
              <ListItemText primary={method} primaryTypographyProps={fontStyle} />
            </MenuItem>

I have managed to change the hover style successfully, however, the styles for selected and selected:hover are not applying. It seems like I may be using the wrong accessor. Can someone help me figure this out?

javascriptreactjsmaterial-ui

Answer №1

If you're looking to spruce up your menu items, consider using the following styles:

const MenuItemStyle = {
  '&:hover': {
    backgroundColor: ${theme.color.secondaryHover},
  },
  '&.Mui-selected, &.Mui-selected:hover': {
    backgroundColor: ${theme.color.secondaryHover},
  },
  '&:focusVisible': {
    backgroundColor: ${theme.color.secondaryHover},
  },
};

When working with MUI Select components, you can utilize MenuProps.

Here's an example implementation:

<Select
  labelId="demo-simple-select-label"
  id="demo-simple-select"
  value={age}
  label="Age"
  onChange={handleChange}
  MenuProps={{
    sx: {
      "& .Mui-selected.MuiMenuItem-root": {
        backgroundColor: `cyan`
      },
      "& .MuiMenuItem-root:hover": {
        backgroundColor: `green`
      }
    }
  }}
>
</Select>

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

What is the best way to exchange configuration data among Javascript, Python, and CSS within my Django application?

How can I efficiently configure Javascript, Django templates, Python code, and CSS that all rely on the same data? For example, let's say I have a browser-side entry widget written in Javascript that interacts with an embedded Java app. Once the user ...

javascriptpythoncssdjangodata-sharing

Finding the Right Path: Unraveling the Ember Way

Within my application, I have a requirement for the user to refrain from using the browser's back button once they reach the last page. To address this, I have implemented a method to update the existing url with the current page's url, thereby e ...

javascriptember.js

Having trouble with self-hosted font not displaying correctly in Material-UI?

I'm currently working on a Material-UI project and I'm trying to incorporate some custom self-hosted fonts that are not available as Google Fonts. Despite following all the guidelines in both Material-UI and JSS documentation, I have implemented ...

reactjsfontsmaterial-uifont-facereaction-commerce

Customize Individual Rows in a React DataGrid

I am exploring the world of Material UI React data grid for the first time, and I am looking to add a unique background color to only the initial three rows. Each row should have a different color scheme that remains static, without any interactions trigge ...

cssreactjsdatagridmaterial-ui

What is the best way to retrieve the post JSON data in the event of a 404 error?

When my service call returns a 404 error, I want to display the server's message indicating the status. The response includes a status code and message in JSON format for success or failure. This is an example of my current service call: this._trans ...

javascriptangulartypescript

Navigate within a div using arrow keys to reposition another div

As a newcomer to JavaScript, I am facing some challenges. My goal is to use arrow keys to move a small div inside a larger div. However, the code below is not functioning as expected. Here is the HTML and CSS: <div id="rectangle"> <div id="s ...

javascript

Retry request with an AngularJS interceptor

Currently, I am in the process of developing an Angular application and encountering some challenges while implementing a retry mechanism for the latest request within an HTTP interceptor. The interceptor is primarily used for authentication validation on ...

javascriptangularjshttprequestinterceptor

MUI Error: Incorrect prop provided to menu item

I am encountering an issue with a React component that generates a list of elements, each containing a button to open a menu. The problem is that the props being passed to each menu are incorrect; they always reflect the props of the last element in the ...

javascriptreactjsmaterial-ui

Utilizing distinct useState for mapped elements

I am struggling to find a solution on how to pass specific useState states to respective mapped elements. export const Polska = () => { const [riverVisible, setRiverVisible] = useState(false) const [mountainVisible, setMountainVisible] = useState(fa ...

javascripthtmlcssreactjs

Press the key to navigate to a different page

I have an input field for a search box. I want it so that when I enter my search query and press enter, the page navigates to another page with the value of the input included in the URL as a query string. How can I achieve this functionality? Thank you ...

javascriptnode.jsreactjstypescriptreact-router

Executing the npm run test command with the unsafe-perm flag within the lifecycle phase

My React/Redux app is working fine, but whenever I run the command below: npm run test An error occurs as shown below: 6 info lifecycle [email protected]~test: [email protected] 7 verbose lifecycle [email protected]~test: unsafe-perm in li ...

javascriptnode.jsreactjsnpmredux

The database server is not appearing on the main.js page of the client

My client's main.js file contains code that is meant to display previous form entries on the webpage, but after submitting the form, no entries appear on the HTML page. My server is running on port 7777 and the root route works in Postman, as does the ...

javascripthtmlexpressvite

The Discord.js command outright declines to function

I'm having trouble with a code that I'm working on. The goal is to create a command that is enabled by default, but once a user uses it, it should be disabled for that user. However, when I try to execute the code, it doesn't work at all and ...

javascriptdiscord.js

When a specific condition is met, Jquery can automatically execute a function contained

I am trying to slowly reveal the h1 tag using jQuery for demonstration purposes. The scroll function is working when I manually click to initiate it, but I am having trouble triggering it automatically. I feel like I might be missing something simple and ...

javascriptjquery

linking to a page that shows the user's chosen option from a dropdown menu

One of the challenges I encountered was creating a feature that allows users to share a specific selection from multiple dropdown lists on a page. Essentially, my goal was to enable users to send a link that would direct others to the same page with the ex ...

javascriptjqueryhtml

Is it possible to pass multiple parameters in one onClick event?

My search bar is located below. Upon clicking the 'search' button, I wish for it to update results and redirect to a different page simultaneously. function SearchBar(props) {   const [innerSearch, setInnerSearch] = useState(""); ...

javascriptreactjssearch

How to Use Radio Buttons in Material-UI to Disable React Components

Just starting out with ReactJS and Material-UI, I've been experimenting with them for about 3 weeks. Currently, I'm facing a challenge where: - There are 2 radio buttons in a group and 2 components (a text field and a select field); - The goal is ...

javascriptjqueryreactjsmaterial-ui

Toggle modal in React to display card-specific information

In my project, I have a series of cards with specific data such as job numbers and titles. To provide more details about each job, I implemented a pop-up modal that can be accessed by clicking the "View Details" button on each card. The idea is to display ...

reactjsmodal-dialogpopup

Customize the appearance of a SelectField (or its underlying DropDownMenu) using Material-UI styling options

Recently, I was experimenting with a basic SelectField feature and it seems to be functioning properly. However, I can't help but notice how unattractive it looks! My setup includes the default MaterialUI component styles along with the standard them ...

material-ui

Is there a way to customize the text color beneath a Doughnut chart using react-chartjs-2?

Currently, I am utilizing the Doughnut feature from the react-chartjs-2 library and I have a specific request. My goal is to change the color of the text beneath the graph to white because it is difficult to read against the current background (please refe ...

reactjsnext.jschartsreact-chartjs-2