Is there a way to customize the hover style of Material UI Select or Menu MenuItem using the theme?

The theme I designed import { createMuiTheme } from 'material-ui/styles';

export const MyTheme = createMuiTheme({
        palette: {
            primary: {
                light: '#757ce8',
                main: '#3f50b5',
                dark: '#002884',
                contrastText: '#fff',
            },
            secondary: {
                light: '#ff7961',
                main: '#f44336',
                dark: '#ba000d',
                contrastText: '#000',
            },
            error: {
                light: '#FF5F57',
                main: '#CE160C',
                dark: '#380300',
                //contrastText: will be calculated to contast with palette.primary.main
            }
        }
    });

Implementation in my application

<MuiThemeProvider theme={MyTheme}>
        <AppContainer>
            <BrowserRouter children={ routes } basename={ baseUrl } />
        </AppContainer>
    </MuiThemeProvider>

Is it possible to adjust the hover style of MenuItem within Menu and Select using the theme? https://i.sstatic.net/y8Nqv.png https://i.sstatic.net/MpU1h.png

cssreactjstypescriptmaterial-ui

Answer №1

Utilized a theme to create custom hover and selected item styles

export const CustomTheme = createMuiTheme({
    palette: {
        action: {
            selected: '#E7A615',
            hover: '#FFD371',
            disabled: '#9B9B9B'
        }
    }
});

Answer №2

To change the color of the MenuItem when hovering, you can employ a simple CSS technique.

Below is an example code snippet:

import React from 'react';
import './testJS.css'
import Menu from 'material-ui/Menu';
import MenuItem from 'material-ui/MenuItem';
class TestJS extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return (
            <div id="root">
                <Menu>
                    <MenuItem primaryText="Maps" className="menu-item" />
                    <MenuItem primaryText="Books" className="menu-item" />
                    <MenuItem primaryText="Flights" className="menu-item" />
                    <MenuItem primaryText="Apps" className="menu-item" />
                </Menu>
            </div>
        );
    }
}
export default TestJS;

To implement this style, include the following lines in your CSS file. Remember to utilize !important to override the default material-UI CSS:

.menu-item{
   background: #dcdcdc !important;
}
.menu-item:hover{
   background: #0e7be9 !important;
}

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

Guide to summing the values in an input box with TypeScript

https://i.stack.imgur.com/ezzVQ.png I am trying to calculate the total value of apple, orange, and mango and display it. Below is the code I have attempted: <div class="row col-12 " ngModelGroup="cntMap"> <div class="form-group col-6"> ...

javascripttypescriptangular6angular5angular7

Interactive Video Effect

Seeking to create a unique video hover effect on an image where, when the mouse hovers over it, a video pops up similar to examples found on this website. I have been grappling with finding a solution for this issue over the past few months. Does anyone ...

jqueryhtmlcss

Why is the return type for the always true conditional not passing the type check in this scenario?

Upon examination, type B = { foo: string; bar: number; }; function get<F extends B, K extends keyof B>(f: F, k: K): F[K] { return f[k]; } It seems like a similar concept is expressed in a different way in the following code snippet: functi ...

typescript

How can an Embedded React + JSS component safeguard generic elements such as <button> and <p> from being affected by the page's style?

I am facing a challenge with a React component that is being embedded in various webpages, either through an extension or as a third-party tool. Most of the styling for this component is done using JSS, ensuring unique class names that cannot be overridde ...

javascripthtmlcssreactjs

Is it possible to capture and generate an AxiosPromise inside a function?

I am looking to make a change in a function that currently returns an AxiosPromise. Here is the existing code: example(){ return api.get(url); } The api.get call returns an object of type AxiosPromise<any>. I would like to modify this function so ...

javascripttypescriptaxios

Communication via socket between an external server, our server, and a client built using React

Currently, I am operating a server using express. Within this server, I have established a connection with an external socket server which uses "wss://..." as the protocol. While I am able to receive data from this external websocket, my primary inquiry ...

reactjsexpresswebsocket

Can you explain the distinction between declaring a map in TypeScript using these two methods?

When working in TypeScript, there are two different ways to declare a map. The first way is like this: {[key:number]string} This shows an example of creating a map with keys as numbers and values as strings. However, you can also define a map like this: M ...

typescript

Utilize the return function to showcase the organized outcomes on the webpage

This is my Alignments.js react component that uses the new useState and useEffect React hooks. It's working great, displaying a list of alignments: import React, {useState, useEffect} from 'react'; import './App.css'; import {Link ...

arraysjsonreactjsreact-router

Utilizing CSS to incorporate a background image into HTML code

Is it feasible to utilize pure HTML for the background-image property? Consider the following scenario: The original: background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' version='1.1' height=&apo ...

htmlcssbackground-imagefont-awesome

What is a solution to prevent style.css from being recognized as the Jekyll Page?

Currently, I am utilizing an expression {% assign mypages = site.pages | sort: "order" %} {% for page in mypages %} {% unless page.exclude %} <a href="{{page.url|absolute_url}}"> {{ page.shortname }} <span class="rate">{% include indexmod.h ...

cssrubyjekyllliquidgithub-pages

React Native Android Toolbar Overlapping Status BarIs this rewrite suitable to your

I am currently working on customizing the status bar color in a react native project. I have integrated react-native-material-ui for the toolbar feature. However, I am facing an issue where the toolbar seems to shift up and down when I adjust the status ba ...

react-nativematerial-ui

Library of components relying on an external library or framework

Imagine having a versatile component library that includes buttons, input fields, and more complex components. The goal is to distribute this library via npm in order to maintain consistency in various "Parent Projects" by achieving the same look and feel ...

reactjscomponentsmaterial-uiencapsulationnpm-publish

Is it possible to manipulate elements within an overflow container using JavaScript/jQuery when using the HTML style "overflow:hidden"?

My <div> has a styling of style="overflow:hidden" and the size of the <body> is fixed, intended as a multi-screen display without a user interface. Is there a method to access these "invisible" elements to identify the first one that exceeds t ...

javascriptjqueryhtmlcss

`Issue with disabled MenuItem color in Material-UI components`

Excuse me, I'm still getting the hang of all this. I've been using makeStyles to adjust the color of my MenuItem items but I can't figure out why the disabled items always look lighter even though I have set the same color. I need help fixi ...

reactjsmaterial-ui

Turning HTML elements 90 degrees for vertical printing without the need for a landscape class

My current project involves creating a template for generating PDF files with CSS. I've set up different paper sizes and orientations using @page and media queries in my CSS code. You can check out a snippet of the CSS here. One challenge I'm fa ...

htmlcsspdf

Is there a way to determine if a table cell contains overflowing text compared to another cell?

Is there a way to detect if the content of the fourth td overflows from the second td? I am looking for a method to determine which td has overflowed text and identify which td's text is overflowing. What approach can be used to determine which td i ...

javascriptjqueryhtmlcss

What is the proper way to eliminate the top margin from a div that has the display table-cell property?

There are two div elements with display: table-cell property: <div> This is a table cell </div> <div> <h1>Some content</h1> <h1>Some content</h1> <h1>Some content</h1> <h1>Som ...

htmlcss

The continuous re-rendering is being triggered by the Async/Await Function

I am facing an issue with fetching data from the backend using axios. The function is returning a Promise and each time I call it, my component keeps rendering continuously. Below is the code snippet: import { useState } from "react"; import Ax ...

reactjstypescriptaxios

ReactJS encountered an error: Uncaught RangeError due to exceeding maximum call stack size

I am currently following a tutorial on YouTube to create my own contact manager app: Link to the Youtube video However, I keep encountering an error whenever I try to add new contacts. Here is a screenshot of the error: Screenshot of the error Additiona ...

reactjsuuid

LineChart component from MUI not adapting to various screen sizes

My current implementation of the MUI X Line Chart is causing responsiveness issues. <div className="grid sm:col-span-full lg:grid-cols-2 lg:grid-rows-3 lg:gap-8"> <div className="overflow:hidden"> <LineChart xAxis ...

reactjsmui-xmui-x-charts