Customizing Material UI Popover CSS classes within a Select component in a React application

I have integrated the Material UI Select component into my React project.

I am attempting to customize the CSS classes .MuiPaper-root and/or .MuiMenu-list.

This is how my Select component looks:

<Select
  value={selectValue}
  disableUnderline
  onChange={handleChange}
  css={styles.select}
>
  {cities?.map((city) => {

    return (
      <MenuItem
        key={city.value}
        value={city.value}
        css={styles.selectItem}
      >
        {city.label}
      </MenuItem>
    );
  })}
</Select>

However, the following code snippet doesn't seem to be effective:

export default ({ theme }: StylesProps) => ({
 select: css`
   .MuiPaper-root {
      background-color: red;
    }
 `,
});

Answer №1

As per the information provided in the documentation, there are various ways to customize styles in MUI. To alter the appearance of MuiPaper, one can utilize the createMuiTheme function to create a theme and override the styles for MuiPaper as shown below:

const theme = createMuiTheme({
  overrides: {
    MuiPaper: {
      root: {
        color: "white"
      }
    }
  }
});

Subsequently, this created theme needs to be passed as a prop to the ThemeProvider component:

<ThemeProvider theme={theme}>
          // ***Insert other parts of your code here*** //
</ThemeProvider>

When looking at changing the MenuProps in the Select component, the Select component provides a property known as MenuProps (documented here) that can be used.

To begin with, I defined a list style within the useStyles hook:

const useStyles = makeStyles((theme) => ({
// other classes //
  list: {
    backgroundColor: "blue"
  }
}));

This list style is then passed as a MenuProp property to the select component:

<Select
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            value={age}
            onChange={handleChange}
            MenuProps={{ classes: { list: classes.list } }}
          >
                 // ***Other parts of your code go here*** //
</Select>

I have also created a codesandbox example demonstrating these modifications. In this demo, the text color in Muipaper has been changed to white, while the background color in MenuProps has been set to blue.

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

Traversing an array of objects to extract and display the key-value pairs for each object

Here is an array I am working with: const cuisines = [ { african: "African" }, { american: "American" }, { arabian: "Arabian" }, { argentine: "Argentine" }, { asian: "Asian" }, { asian_fusion: "Asian Fusion" }, { australian: "Australi ...

Forming a header area by utilizing a 960 Grid container

I'm in the process of designing a website utilizing the 960 Grid system. The header consists of three parts: the logo, the navigation, and the login form. I've implemented media queries to center both the logo and the login section when the pag ...

The hover animation is not functioning properly in Icomoon

I have implemented a menu with a CSS3 hover animation called toTopFromBottom. Now, I want to replace the Font Awesome icons with Icomoon icons and apply the same animation effect: HTML: <div id="top-bar" class="top-bar"> <div class="container" ...

Unable to utilize the Object.values method with an object in TypeScript

I am attempting to create an array of values from all the keys within an object by using the Object.values(obj) function, but I encountered the following error message: No overload matches this call. Overload 1 of 2, '(o: { [s: string]: string; } | ...

Issue: Utilized more hooks than in the previous render cycle

After the initial load of a component that renders and makes data calls on the client side, everything works fine. However, when clicking a "see more" button to make another call, an error occurs in the console indicating that there are too many hooks be ...

Tips for customizing Material UI's styled() SVG icon to accept SVG icon as a react component:

Currently, I have functioning code that uses the "any" type for props. When transitioning to MUI v5 and using the mui v4 makeStyles, this approach raises compatibility issues that were not present before. // Import SVG Icons components import { ReactCo ...

Embed a Style-sheet into an Iframe (Facebook Like Box)

I'm facing the challenge of customizing a Facebook like box with predefined image sizes and borders that don't align with our design. I want to override some styles to make it more suitable for our website. The Likebox is currently embedded via ...

When the button with an image is clicked, it will display a loading element

I have developed an application that heavily utilizes ajax, and I am looking to implement the following functionality: I would like to have a button with both text and an image. When this button is clicked, it should be disabled, and instead of the origina ...

What is the best way to generate a switch statement based on an enum type that will automatically include a case for each enum member?

While Visual Studio Professional has this feature, I am unsure how to achieve it in VS Code. Take for instance the following Colors enum: enum Colors { Red, Blue, When writing a switch statement like this: function getColor(colors: Colors) { swi ...

Line 7:9: Encountered an expression when expecting an assignment or function call, resulting in an unused expression warning

import React from 'react' import "./main.css"; function MainContent(){ <div className="card"> <div className="card_img"> <img src="./images/iphone_13_pro_max ...

Center align the division within the list item

Check out the fiddle provided here: https://jsfiddle.net/5jnnutg8/ I am looking for a way to center align and display inline the "something #" list items. While the title "Hi" can be centered using text-align: center in css, this doesn't seem to wor ...

HTML - No alterations to Writing Mode

Hello everyone, I'm attempting to display a header vertically in my table but the writing-mode property is not having any effect. CSS .VerticalText { writing-mode: tb-rl; } HTML <td rowspan="6" id="tableHeader" class="Border"> <h1 cl ...

What is the procedure for adding a background to a primeNg Tree component?

Working with Angular CLI 6 and primeNg version 6.0.1 I have been attempting to customize the background of the tree component without success. When I try using style="background:red" in the HTML file, the tree display becomes distorted with a height of on ...

Encountered a React Proxy error: Unable to redirect request /api/ from localhost:3000 to http://localhost:5000 (ECONNREFUSED). Unfortunately, couldn't find any online solution for this issue

I've been struggling to connect my react frontend to the backend despite trying various methods. I added "proxy" : "localhost:5000" in my code, but still no luck. Additionally, I attempted the following: const { createProxyMiddleware } = require(&apo ...

Press the toggle switch button to easily switch between two distinct stylesheets

With a looming exam at university, my web design professor has tasked us with creating a website. The unique challenge is to implement a style change by seamlessly switching between two different CSS stylesheets. My idea is to start with a black and white ...

Variable width items inside an overflow-x container

I'm searching for a solution to create a vertical navigation list that can accommodate elements wider than the container itself. Since users have the freedom to input any names for the items, I cannot predict their width, except maybe by setting a ver ...

Tips for inserting manual line breaks in justified text

My task involves taking a 5-page story from a Word document and implementing it on a website. #reading { hyphens: auto; text-align: justify } <div style="font-size: 20px; width: 750px; margin-bottom: 4em;" class="reading" id="reading"> TextT ...

Adjust the width of the dropdown menu to match the text input field using jQuery

Struggling with jquery-mobile to collect user information, I am facing an issue aligning the width of my select menu with the text input fields. Despite successfully matching the background and border colors of the select menu with the text input fields, ...

Tooltips will display on all Nivo charts except for the Nivo Line chart

I'm having an issue with nivo charts where the tooltip isn't showing up for my line chart. Even after copying and pasting the example from here: Other chart examples work fine with tooltips appearing, but for some reason, it's just not work ...

The Material UI stepper lacks animation

I am currently using a vertical stepper in Material UI to display a pricing calculator. However, the animation feature is no longer functioning as expected. Previously, the stepper would animate a collapse effect when the steps changed. I suspect that thi ...