Is it possible to modify the font color of a specific MenuItem in material-ui?

Question

Is it possible to modify the font color of a specific MenuItem in material-ui?

I've scoured every corner of the internet, but I'm still stumped by this question: How can I tweak the text color (not the background) for a selected or hovered MenuItem? I know the solution lies within useStyles, but my attempts thus far have been fruitless. I've experimented with various CSS approaches, but material-ui seems to have its own unique naming conventions.

const StyledMenuItem = withStyles(theme => ({
    root: {
        "&:focus": {
            backgroundColor: theme.palette.primary.main,
            "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
                color: theme.palette.common.white
            }
        },
        paddingTop: "4px",
        paddingBottom: "4px",
        paddingRight: "4px",
        paddingLeft: "4px",
        margin: "4px",
        fontSize: "0.8rem",
        lineHeight: "1",
    },
    searchMenuItem: {
        paddingTop: "2px",
        paddingBottom: "2px",
        selectedTextColor: "#ffffff",
  }
}))(MenuItem);

Could someone please guide me on what needs to be added to useStyles in order to change the selected text of a menuitem to white?

I've attempted adding things like

&.selected: {
  color: "#ffffff",
}

to the menuitem classes without success. Any assistance would be greatly appreciated!

javascript css reactjs material-ui

Answer 1

Answer №1

To pinpoint the specific class used on selected elements, utilize a CSS selector and observe the console output. Based on my interpretation of the documentation, this snippet should cater to your needs:

&.Mui-selected: { color: "#ffffff", }

Answer 2

To pinpoint the specific class used on selected elements, utilize a CSS selector and observe the console output. Based on my interpretation of the documentation, this snippet should cater to your needs:

&.Mui-selected: { color: "#ffffff", }

Answer 3

Answer №2

Essentially, I experimented with the documentation to override the CSS styles but encountered issues that prevented it from working as expected. Although there is a comprehensive solution available, I found it cumbersome to navigate through and preferred using CSS for its simplicity.

Instead, I opted for a different tactic by leveraging the specificity of CSS, which ultimately led to success.

For demonstration purposes, here's a jsfiddle implemented in a react environment (though the language used is not critical – focus on the CSS).

The strategy involved inspecting the menu elements in the developer tools to identify their classes and customizing them effectively using CSS rules.

Here's an excerpt of the CSS code:

.horiz-menu div:hover { /* Enhancing specificity */
   color: red;
}

And here's a snippet of the accompanying JS code:

const { Menu, MenuItem, MuiThemeProvider, getMuiTheme } = MaterialUI;

class Example extends React.Component {
  render() {
    return (
     <Menu className="horiz-menu">
       <MenuItem primaryText="Home" />
       <MenuItem primaryText="Test Menu 1" />
       <MenuItem primaryText="Test Menu 2" />
       <MenuItem primaryText="About" />
     </Menu>
    );
  }
}

const App = () => (
   <MuiThemeProvider muiTheme={getMuiTheme()}>
   <Example />
   </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
    document.getElementById('container')
);

Answer 4

Essentially, I experimented with the documentation to override the CSS styles but encountered issues that prevented it from working as expected. Although there is a comprehensive solution available, I found it cumbersome to navigate through and preferred using CSS for its simplicity.

Instead, I opted for a different tactic by leveraging the specificity of CSS, which ultimately led to success.

For demonstration purposes, here's a jsfiddle implemented in a react environment (though the language used is not critical – focus on the CSS).

The strategy involved inspecting the menu elements in the developer tools to identify their classes and customizing them effectively using CSS rules.

Here's an excerpt of the CSS code:

.horiz-menu div:hover { /* Enhancing specificity */
   color: red;
}

And here's a snippet of the accompanying JS code:

const { Menu, MenuItem, MuiThemeProvider, getMuiTheme } = MaterialUI;

class Example extends React.Component {
  render() {
    return (
     <Menu className="horiz-menu">
       <MenuItem primaryText="Home" />
       <MenuItem primaryText="Test Menu 1" />
       <MenuItem primaryText="Test Menu 2" />
       <MenuItem primaryText="About" />
     </Menu>
    );
  }
}

const App = () => (
   <MuiThemeProvider muiTheme={getMuiTheme()}>
   <Example />
   </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
    document.getElementById('container')
);

Answer 5

Answer №3

If you're struggling with changing the text color of a selected menu item, remember to utilize the &hover command from material-ui.

For example, if you want white text on a dark background for a selected menu item (assuming your primary theme has a dark background color for selected items), follow these steps:

const StyledMenuItem = withStyles(theme => ({
    root: {
        "&:focus": {
            backgroundColor: theme.palette.primary.main,
            color: theme.palette.common.white, <===ADD THIS LINE
            "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
                color: theme.palette.common.white
            }
        },
    }
}))(MenuItem);

Answer 6

If you're struggling with changing the text color of a selected menu item, remember to utilize the &hover command from material-ui.

For example, if you want white text on a dark background for a selected menu item (assuming your primary theme has a dark background color for selected items), follow these steps:

const StyledMenuItem = withStyles(theme => ({
    root: {
        "&:focus": {
            backgroundColor: theme.palette.primary.main,
            color: theme.palette.common.white, <===ADD THIS LINE
            "& .MuiListItemIcon-root, & .MuiListItemText-primary": {
                color: theme.palette.common.white
            }
        },
    }
}))(MenuItem);

Is it possible to modify the font color of a specific MenuItem in material-ui?

Answer №1

Answer №2

Answer №3

Similar questions

Create a border around the text using a strokeoutline

The failure of the Selenium script can be attributed to the presence of the AJAX

Accessing a local JSON file in a ReactJS application without the need for a local server installation

A little brain teaser for you: Why is this not functioning properly on Google Chrome?

Issue with Material UI Menu not obtaining the accurate ID

Variety of HTML tags yet identical ID

Tips for inserting the <style> element within a Vue.js component

Fetching data dynamically using ajax as you scroll

Why isn't my state being updated properly with React's useEffect, useState, setInterval, and setTimeout functions?

The default setting for the calendar picker indicator should be enabled

"Exciting features of NextJS 13 include the utilization of client component callback functions

Automatically deliver a message regularly at set intervals on Discord across all groups and guilds

Displaying the action.type in Components with React and Redux: A comprehensive guide

The MUI next Tooltip fails to display upon hovering

The module specifier "logrocket" could not be resolved, make sure to use either npm or

Activate onbeforeunload when the form is not submitted

Dealing with CORS, IIS7, and PHP - Overcoming the Access-Control-Allow-Origin obstacle

Pinia alert: The function "getActivePinia()" was invoked without an active Pinia instance. Could it be possible that you overlooked installing Pinia?

Intellisense in VS Code is not functioning properly for vitest matchers

A single pixel border surrounding an odd number of divs