Is there a way to customize the appearance of the select dropdown without impacting the styling of other Material-UI components, such as the show/hide columns panel?

I am currently working on customizing the appearance of the dropdown panel for my MUI select component. My goal is to achieve a design similar to this: Desired show/hide columns example

To accomplish this, I have implemented specific styles within the MuiList section of my ThemeManager:

    MuiList: {
      styleOverrides: {
        root: {
          'backgroundColor': 'var(--main-color)',
          'color': 'var(--text-color-light)',
          'border-width': 'none !important',

          '& .Mui-selected': {
            backgroundColor: '#dddddd !important',
            'color': 'var(--primary-color-hover) !important',
            borderBottom: '1px solid #26586B',
            '&:hover': {
              backgroundColor: 'var(--main-color) !important',
              color: 'var(--primary-color-hover) !important',
            },
          },
...

However, these modifications are unintentionally affecting other MUI components, such as the "Show/Hide Columns" panel in a data table, resulting in a different look like so: Custom dropdown style The issue arises from the inability to assign a unique id or className to the dynamically generated dropdown panel by MUI. Consequently, the ThemeManager styles are being applied across both the select dropdown and other components, like the columns panel, which was not intended.

As a result, the columns panel ends up appearing incorrectly styled with the ThemeManager styles, deviating from the desired outcome: Incorrectly styled show/hide all panel

Is there a way to apply styling exclusively to the select dropdown without impacting other MUI components, such as the show/hide columns panel?

cssreactjsmaterial-uithemes

Answer №1

Avoid modifying MUI's theme file directly as it can cause issues with various components that rely on it, such as the MuiList component which is used by many other components like Drawer and Table.

Modifying CSS through class from sx or makeStyles may not work for dropdown styling as the select dropdown is rendered outside the body tag in React applications.

To style dropdowns, there are two recommended approaches:

  • Using the styled() utility to create a new component based on existing MUI components allows for custom styling that can be reused across different screens.
  • Utilizing MenuProps provided by MUI components, especially for components displayed outside the main body content (portal-style), such as the MenuProps prop in the select component.

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

Encountering a 404 error while trying to access the API using Nginx and Express

After setting up a server with Nginx to serve my React application and proxy_pass requests to an Express API, I encountered an issue with requests prefixed with /api/ not being properly proxied. Here is a snippet of my Nginx configuration: server { ser ...

reactjsnode.jsexpressnginxproxypass

Creating a smooth, curved line that connects two specific points on HERE maps: A step-by-step guide

In the HERE map documentation, I couldn't find any attributes or properties specifically for creating a curved line between 2 points on the map. My goal is to achieve something similar to this in HERE maps ...

javascriptreactjshere-apiheremaps

What could be the reason behind Bootstrap not functioning properly?

I'm having trouble with the navigation display in bootstrap, as I am new to it. <!DOCTYPE html> <html> <head> <title>Title</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <l ...

jquerycssbootstrap-4

Difficulties encountered when trying to align the content within a div

I am struggling to align the content within three horizontal divs on an info bar. The center div should be aligned center and the right-hand div should be aligned to the right, but my CSS attempts have not been successful. My attempts included adding text ...

htmlcssvariablesmathcalculated-field

Troubleshooting Typescript Compilation Error in React - Cannot assign type 'Element' to type 'FunctionComponent<{}>'

The code snippet originally utilized - import { Create } from '@material-ui/icons'; <DroppableFolder count={draftsCount} sidebarOpen={open} folderId={FolderType.Drafts} Icon={Create} name="Dr ...

reactjstypescriptreact-hooks

Troubleshooting issues with CSS fixed and absolute positioning in Chrome

Something strange is happening on my website with the static header bar. It works perfectly everywhere except for one page and only in Chrome. The div with class "top-bar" is set to position: fixed. <header> <div class="top-bar"> & ...

htmlcsscss-position

Creating a JavaScript popup script from scratch

I'm looking to create a script using only JavaScript that will display a popup when the page loads. The background should be faded and I want to include custom content in the popup. I don't want to utilize CSS or HTML directly. Embed the CSS ...

javascriptcsspopup

Exploring ways to utilize Next.js (React) for formatting date and time with either Moment.js or alternate

When deciding on the best method for handling date formats in my next front-end app, should I use Moment.js or JavaScript functions? The data is sourced from the backend as the date type, and I want it to be displayed in a user-friendly format while consid ...

javascriptreactjsnext.js

Passing data to a child component using Context in React is not working

I have a parent component where I am storing data in an array of objects and then passing it to another component through Context. Here is how my parent component looks: export type HistoryData = { input: string; date: string; ...

reactjstypescriptreact-context

How to position an element to the left and another to the center of the screen while vertically aligning both using CSS

I have a single list and an h1 header. My goal is to position the list on the left side of the screen and center the h1 vertically in relation to the list. The size of the list is variable, so I want the height and width to adjust accordingly without overl ...

htmlcss

Do you prefer CSS icons or icon images?

I am currently managing a website that contains numerous icons, each of which is associated with a separate image. I have been contemplating the idea of combining all these icons into one image to improve loading speed. However, I am unsure if this would b ...

htmlcssimagephotoshop

Adjust the height of the svg

My page contains an SVG that is impacting the height of its container and causing other elements to move. Is there a way to adjust the height of the SVG? Currently, the SVG is a square but I would prefer it to be a rectangle as the height is too large. &l ...

htmlcsssvg

Using Material UI's TextField component in Formik causes the parent component to render excessively

Formik is being utilized in my React project, featuring: Wrapper component const Wrapper = ({ children, id }) => { console.log("re-render ", id); return <div>{children}</div>; }; Form component <Formik initialVal ...

reactjsmaterial-ui

Tips for creating tests using Outlet in React-Router-DOM v6

Currently, I am using Jest for writing tests and facing an issue with the Outlet component from React-Router-DOM. Within my project, there is a component called Preferences that is nested inside another router. This Preferences component contains 5 child ...

reactjsjestjsreact-routerreact-testing-library

Tips for compiling JSX files for React in Rails 7

In my current project, I have a React component located at javascript/application/components/star_rating.js.jsx. Now, I am trying to implement this component in another part of my JS code with the following snippet: let starRating = <StarRating name={na ...

reactjsjsxruby-on-rails-7

What is the best way to display ng-repeat elements in a horizontal layout

Looking for a way to display thumbnails horizontally using ng-repeat in AngularJS and Bootstrap. Any ideas on how to achieve this with CSS or Bootstrap? <div class="row"> <ul class="col-md-4" id="phones"> <li class="thumbnail" ...

htmlcssangularjstwitter-bootstrapangularjs-ng-repeat

Exploring Submit Validation Implementation with Material UI and Redux-Form

Currently I am utilizing Redux Form and material UI in order to create a registration page. In my onSubmit function, I am incorporating the fetch API to send a POST request to the server. Should there be any errors related to the server (such as a duplicat ...

reactjsreduxmaterial-uiredux-form

The localhost is not updating on subsequent runs of npm run dev after the initial run

Every time I launch npm run dev (for my nextjs application), it functions properly on the initial run. However, after making modifications to my files, saving them, and checking my localhost, the changes do not appear. What is the solution? Currently, I f ...

reactjsnode.jsnpmnext.js

Is there a way for me to invoke a different function that is located external to

I am currently in the process of setting up an event that triggers on any change within the form input class. import React, { useState } from "react"; DealerRegistration extends React.Component { state = { business_type : 'd ...

javascriptreactjsnext.js

Video not visible in program (CSS, EXPRESS)

I am struggling to add a video to my page. The default method of creating a path for it isn't working for me. I believe I need to place the path somewhere else, but I'm not sure where. I have attempted to include the video in the same folder as ...

cssnode.jsexpress