How can you override the selected classes for menu items in Material-UI using React.js?

Hey there! I'm facing an issue where I can't override the class that displays the correct styling when a menuItem is selected. Below is my code:

<MenuItem component={Link} to="/Acceuil" 
        className={{root:classes.menuItem ,selected:classes.selected}} 
           selected={pathname === "/Acceuil"} >
              <ListItemIcon>
                  <Icon className={classes.icon} >
                      insert_drive_file
                   </Icon>
               </ListItemIcon>
            Gestion Commandes
        </MenuItem>

And here is the classes const :

Const classes = theme => ({
       menuItem: {
         fontStyle:'bold',
         backgroundColor: 'white',
         width: '88%',
      '&:active':{
        borderLeft: '4px solid #51bcda',
        backgroundColor: "-webkit-box-shadow: 6px 4px 53px -7px 
        rgba(0,0,0,0.75), -moz-box-shadow: 6px 4px 53px -7px 
        rgba(0,0,0,0.75),   box-shadow: 6px 4px 53px -7px 
        rgba(0,0,0,0.75),",
        },
       selected:{
       backgroundColor:'red !important' 
       } 
       });

Thank you in advance for your assistance!

cssreactjsmaterial-uimenuitemstyling

Answer №1

If you're trying to figure out how to customize the styling of this element with the right specificity, it's important to examine the ListItem source code. Keep in mind that MenuItem inherits most of its styling from ListItem.

Here are the key parts of the ListItem styles related to the selected state:

export const styles = theme => ({
  root: {
    '&$selected, &$selected:hover, &$selected:focus': {
      backgroundColor: theme.palette.action.selected,
    },
  },
  /* Styles applied to the root element if `selected={true}`. */
  selected: {},
});

Below is an example of how you can override the styling for the selected MenuItem, accompanied by a functional CodeSandbox based on the Selected menus demo.

const styles = theme => ({
  menuItemRoot: {
    "&$menuItemSelected, &$menuItemSelected:focus, &$menuItemSelected:hover": {
      backgroundColor: "red",
    },
  },
  menuItemSelected: {},
});
...
            <MenuItem
              classes={{
                root: classes.menuItemRoot,
                selected: classes.menuItemSelected,
              }}
...

You can also check out another helpful question and answer related to customizing a different Material-UI component: Styling BottomNavigation in React.js Material-UI

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

How to style a div to center an image vertically with text using CSS

I attempted to vertically align an image next to text within my link. Thus far, I've relied on a background image to achieve perfect vertical centering for the image of my text. CSS .label { margin: 0 0 0 15px; padding: 0; color: #fff; } a.morein ...

css

The new user profile is successfully being generated on the server side, however, there seems to be an issue with updating the information in the redux store. The onQueryStarted function is rejecting the changes

When a user is created on the server, why isn't it updating in the redux store? I keep getting rejected in the onQueryStarted function. Check out the image for more details: here ...

reactjsreduxredux-toolkitrtk-query

Is it possible to deactivate an element based on a specific string present in the URL?

<div class="custom-class1"> <div class="custom-class2" id="custom-id1">hello 1</div> <div class="custom-class3" id="custom-id2">hello 2</div> <div class="custom-class4" id="custom-id3">hello 3&l ...

javascripthtmlcssbloggerblogspot

Incorporating base Tailwind CSS colors with the daisyUI theme: A simple guide

For my NextJS project, I'm utilizing Tailwind CSS in conjunction with daisyUI. In my configuration file tailwind.config.js, I have it set up as follows: /** @type {import('tailwindcss').Config} */ /* eslint-env node */ module.exports = { ...

javascriptreactjsnext.jstailwind-cssdaisyui

What steps can be taken to ensure that the content in column two does not impact the positioning of content in column one?

Is there a way for the input text container to remain in its original position within the layout even after submitting text? Usually, when the data displayed container's height increases, it pushes the input text container down. Despite trying absolu ...

htmlcssbootstrap-5

Selenium Actions Class Cannot Drag Range Slider Thumbs

Currently, I am in the process of automating a web application that features a range slider with two thumbs using Selenium. The HTML structure of the slider is outlined as follows: 0 10000 I am trying to automate the range slider intera ...

pythonreactjsselenium-webdriverautomationrangeslider

Troubleshooting CSS3 pulse animation failure in Internet Explorer and Firefox

My animated background is looping infinitely and working perfectly in Chrome and Safari. However, I'm having trouble getting it to work in IE and FF. I've tried looking at other people's questions on this topic but still can't figure it ...

htmlcss

Identifying the signs that you're on the right track with react-router-dom

Utilizing React router for navigation within my react application. Within the footer, there is a link to a /about path. Upon clicking the link, it directs me to localhost:3000/about. However, on subsequent clicks, it redirects me to localhost:3000/about/ab ...

reactjsreact-router

Issue with web server package.. Unable to locate module

As a newcomer to React.js, I have been exploring various tutorials to successfully set up the environment for React.js! Initially, this was the issue encountered: The CLI has moved into a separate package: webpack-cli. To utilize the CLI, it is necessary ...

reactjswebpack

Understanding the default value type in React's setState method

I am new to React and facing difficulties identifying errors in my code. My goal is to display a list of users retrieved from a server using socket.io. Below is the original code snippet: // list of users const [users, setUsers] = useState() useEffect(() ...

javascriptnode.jsreactjs

The issue of a malfunctioning Customized Bootstrap Carousel when used with flex and gap is causing

I have created a unique bootstrap carousel where instead of displaying one div, I showcase three (one in the middle and half of each on the sides). The issue arises when I add borders to my divs and attempt to create spacing between them using display: fle ...

csssassbootstrap-5

Updating an API parameter in React's setState doesn't reflect the new changes

Having trouble with a web app that I'm currently developing. The issue arises on the recipe page where the search functionality isn't updating as expected. Although it is binded to the Enter key and the request itself works, the state update do ...

javascriptreactjs

Adjusting varying column heights in Material UI for consistent display

I am currently working on a React project where I have implemented a two column layout with Material Design. The issue I am facing is that the right textbox needs to be taller than the left one, but adjusting the number of rows also affects the position of ...

reactjsmaterial-ui

Tips for keeping the background image in place while resizing the page

How can I set the background image for the whole page without it changing position with resizing? The image is 3065px in height so that should not be the issue. .bg { background-image: url("#"); height: 3065px; width: 100%; background-positio ...

cssbackground-image

Customizing the default image of a Select dropdown field in Sencha Touch

Does anyone know how to change the default image of a select dropdown in Sencha Touch to a customized image? I've attached a screenshot for reference but can't seem to find any properties or classes to adjust this. Any guidance would be greatly a ...

javascriptcsshtmlsencha-touchsencha-touch-2

The art of spinning in CSS

Can anyone help me figure out how to make an animation in CSS stay at its last frame instead of reverting back to the beginning? The <i>animation-fill-mode: forwards;</i> property doesn't seem to be doing the trick. Is there a workaround ...

cssanimationrotationcss-animations

Please ensure you have the Excel file downloaded before running the query in its entirety

I'm utilizing the library react-data-export. An issue I'm facing is that I generated the excel file prematurely, so now I have to press twice for it to function correctly. Here's the code snippet: import ReactExport from "react-data-expor ...

reactjsexport-to-excel

Why won't my React table reflect the changes made to my Django database when using axios and React Table for adding or deleting objects?

How to populate a React table with data from a Django database I attempted to retrieve data by generating a JsonResponse and displaying it at api/data. The data appeared correctly on the URL. Next, I attempted to load the data into the TableComponent usin ...

reactjsdjangoreact-typescriptreact-table

Adjust the height of each child element to be half of the fixed height of the parent

There is a wrapper containing multiple boxes generated using ng-repeat from a list. The wrapper has a fixed height of 300px. If the list contains only one box, a class is added to fill the entire space of the wrapper. However, when there are more than on ...

htmlcssangularjsflexbox

Is there a way to incorporate a deletion feature within a list of items using JavaScript?

When adding a new item, I want to include a delete button next to it so I can easily remove the item by clicking on the button. However, I am having trouble figuring out how to implement this functionality using JavaScript. You can view my code snippet he ...

javascripthtmlcss