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

header color scheme and dimensions

Hello, I've managed to get the menu working correctly on my website at www.g-evo.com/header.php. However, I'm now facing an issue with the size of the header. I'd like to shrink the grey area slightly so it aligns better with the logo, while ...

Encountering issues while attempting to connect to Metamask using React and Next.js

I'm currently working through a tutorial on creating an NFT marketplace using Next.js, and I've hit a roadblock when it comes to implementing a button that should open MetaMask. From what I understand, calling 'connectWallet('injected&a ...

Utilize the display property with grid to effortlessly expand a block to occupy the entire width

I am currently exploring the grid system and I have a specific challenge. I would like the third block to expand to its full width without the need for extra classes. Can this be achieved using only internal CSS? .grid { margin: 36px auto; height: ...

Problem with image title in jQuery mobile

My code seems to be having an issue where the title does not display completely when hovering over it. For example, if the title is set as "The Value", only "The" is shown and not "The Value". Can anyone help me identify the mistake? Thank you in advance ...

Highlight the words in the text that correspond with the options provided

My task involves working with an array of words such as const = ['cat','dog']. I also have a text area, input field, or editable div where I need to input words and highlight any matches from the array. Currently, I am using the highlig ...

What is the best way to vertically center elements within a navigation bar?

I'm currently working on a React application and I am trying to create a navigation bar. However, I am encountering some difficulties with aligning the elements in the middle of the nav bar layout. You can see the issue depicted in the image at this l ...

No specified margin at the top of the website's header section

My task was to design the header section of a webpage to resemble this desired webpage look. I started by creating a "header" tag as a container and added a navbar within it. To display the items, I used an unordered list with CSS adjustments for a horizon ...

How can the first paragraph value of a div be found using jQuery in Next.js?

How can I retrieve the value of the first <p> tag within my div when a button inside the same div is clicked? Despite attempting to use $(this), it doesn't appear to be functioning as expected. Take a look at the code snippet below: <div cla ...

Conflicting styles occur when trying to align images using both TailwindCSS and CKEditor 5

My current project involves using Laravel 10 with Vite as the asset builder and Tailwind for CSS. The app.css file contains the following code: @tailwind base; @tailwind components; @tailwind utilities; I am currently implementing a text editing feature u ...

Contentful does not generate the request

Just embarking on my journey with Contentful and encountering this pesky error. Import error, can't locate file: ./zlib_bindings Haven't made any changes, simply followed the instructions provided in the documentation. The code I've writt ...

Navigation bar's active area does not span the full height

I'm facing some issues with the navigation bar on my responsive website. One issue is that the clickable area for the links does not extend to the full height of the nav bar, and I would like it to cover the entire height. Another problem arises whe ...

Allowing the contenteditable attribute to function only on a single line of

My app allows users to create different lists, with the ability to edit the name. However, I am facing an issue where if a user types a new name, it should remain on only one line. I tried adding max height and overflow hidden properties, but it only hides ...

Creating user interfaces with MaterialUi is possible without the need for

Is it possible to utilize MaterialUI without React? If so, can it be done via CDN or another method? <script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6b190e0a081f460f0a1d06046b191c150f7e7 ...

Expanding Table Rows Contracts Every Row

There is a state that checks if collapse is true or false: const [open, setOpen] = useState(false); then it returns on render: <TableBody> {isCityReady && cities ? (cities.map((row, index) => ( <TableRow key={index} sx={{ borderBottom: ...

What is the process for dynamically updating a variable's state within a render function?

I'm currently working on a project for my class where we are tasked with creating a website using React. Unfortunately, neither myself nor my group members have been able to figure out how to render a function in a variable state and make it dynamic. ...

Tips for aligning two divs vertically and horizontally next to each other

I'm struggling to center two divs both horizontally and vertically at the top of my page. I've tried various methods like "vertically align" & "margin: auto 0", but nothing seems to work. Can anyone help me figure out what I'm doing wron ...

Prevent clicks from passing through the transparent header-div onto bootstrap buttons

I have a webpage built with AngularJS and Bootstrap. It's currently in beta and available online in (German and): teacher.scool.cool simply click on "test anmelden" navigate to the next page using the menu This webpage features a fixed transparent ...

Is there a way to revert to the default behavior for rendering edit cells in the MUI DataGrid?

I am currently working with the MUI 5 data-grid (basic version, not pro, etc.) and I require a custom renderEditCell function. I am familiar with how to use it, but I have a specific requirement - the cell content can either be a plain string or an object. ...

The resizing function on the droppable element is malfunctioning on Mozilla browsers

I've been working on making one div both droppable and resizable. Surprisingly, everything is functioning perfectly in Chrome but not in Firefox. If you'd like to see the issue for yourself, here is my jsFiddle demo that you can open in Firefox: ...

Posting forms in NextJS can be optimized by utilizing onChange and keypress events for input fields

I am currently working on my first Edit/Update form within a newly created NextJs application as I am in the process of learning the framework. I seem to be facing an issue where the form constantly posts back to the server and causes the page to refresh ...