The class name feature on the Drawer component is malfunctioning

React and material-ui are my tools of choice, but I've hit a roadblock. I'm attempting to define some custom CSS behavior for the drawer component, using the className property as recommended. However, despite following the instructions, it's not functioning as expected.

This is the CSS code I've implemented:

.drawer {
    width: 200px
}

.drawer:hover {
    background-color: black
}

And here is how I'm integrating the drawer in my code:

<Drawer open={this.state.isLeftNavOpen}
                             docked={false}
                             className='drawer'
                             onRequestChange={this.changeNavState}>
                        <MenuItem primaryText='Men'
                                  onTouchTap={() => browserHistory.push({pathname: '/products', query: {category: MEN}})}/>
                        <MenuItem primaryText='Women'
                                  onTouchTap={() => browserHistory.push({pathname: '/products', query: {category: WOMEN}})}/>
                        <MenuItem primaryText='Kids'
                                  onTouchTap={() => browserHistory.push({pathname: '/products', query: {category: KIDS}})}/>
                    </Drawer>

I have even tried wrapping the Drawer with a div element, but have had no luck resolving the issue.

Any insights on where I might be going wrong?

cssreactjsmaterial-ui

Answer №1

It appears that the library is indeed adding the className, but the issue you are experiencing seems to stem from material-ui directly applying styles to the element, which take precedence over those in the class you added. While waiting for the library to address this, there are a few options available:

1) Inline the width and styles using the style and/or width properties: (fiddle)

<Drawer open={this.state.isLeftNavOpen}
    docked={false}
    width={200}
    style={{'background-color': 'black'}}
    className='drawer'>

However, this method doesn't support :hover styling, and the current inline styling solution by the library may change soon (refer to issue 1951 and related threads). As of now, the most effective solution to your specific issue is:

2) Declare the styles in the css file as !important to override those provided by the library on the element: (fiddle)

.drawer {
    width: 200px !important;
}

.drawer:hover {
    background-color: black !important;
}

You can also combine these approaches by passing the width as a prop and making only the hover background style as !important.

(The fiddles use LeftNav instead of Drawer because it was easier to work with at the time due to its availability in the material-ui package. More information can be found in this comment).

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

What is the best way to choose all cells that begin, include, or finish with a specific term using JQuery/CSS?

I have a table with some cells and I am looking to utilize JQuery to select specific cells. For example: <td>John Doe</td> <td>John Doe1</td> <td>1John Doe</td> I want to select cells that start with 1, include Doe, a ...

javascriptjqueryhtmlcss

Unlock the secret: Using Javascript and Protractor to uncover the elusive "hidden" style attribute

My website has a search feature that displays a warning message when invalid data, such as special characters, is used in the search. Upon loading the page, the CSS initially loads like this: <div class="searchError" id="isearchError" style="display: ...

javascripthtmlcssautomationprotractor

The Material UI 5 Autocomplete feature is not providing the expected filtered options

I am currently utilizing Material UI V5, Since the default filtering in Autocomplete does not provide the desired result array, I have implemented my own filterOptions function. const customFilter = (options, state) => { let result = options.filter(op ...

material-uiautocomplete

Dynamic Placeholder Updates Based on Selected Menu Option

Seeking advice on how to implement dynamic placeholder text in a material ui select menu. The menu has 3 options: name, email, and phone. I would like the input box next to it to display different placeholder text based on the selected menu item, such as ...

reactjsmaterial-ui

Making the height of two divs equal within the same parent element using CSS

Looking for a way to make two adjacent divs, #innerwrapper .sidebar and #innerwrapper > .content, from the same parent container, #innerwrapper, have equal heights due to them being floated left. I initially used jQuery in a separate file to resolve th ...

htmlcssheight

Checking the conditional styling implemented with Material UI makeStyles: a step-by-step guide

For the past few weeks, I've been working on a React app where I heavily rely on Material UI components. One particular component changes its style based on the values of its props. To achieve this, I used the following approach: const useStyles = ...

javascriptreactjsmaterial-uireact-testing-library

Using the CSS property `transform:scale(2,2)` causes an image to suddenly appear in the

Currently utilizing Joomla 3.3, I am seeking to enlarge an image on mouseover. The html code for the image is as follows: <img class="enlarge" style="float: right; margin: 10px; border: 5px solid black;" title="Chapter 1: Physical Differences" src="im ...

htmlcsstransformscalez-order

Exploring Custom Styling Options in Material-UI 5

Looking to upgrade my code from MUI version 4 to 5. In MUI 4, I was able to add custom classes using the makeStyles function: const useStyles = makeStyles((theme: Theme) => ({ root: { cursor: 'pointer', }, } ...

material-ui

How can I ensure the footer stays at the bottom of the page using a table layout?

For quite some time now, I've been working on achieving a table layout with a sticky footer. My specific requirement is for the footer to remain fixed at the bottom even when zooming in or out. However, whenever I try to adjust the zoom level of the w ...

css

Easy Registration Page using HTML, CSS, and JavaScript

In the process of creating a basic login form using HTML and CSS, I'm incorporating Javascript to handle empty field validations. To view my current progress, you can find my code on jsfiddle My goal is to implement validation for empty text fields ...

javascriptcsshtml

What is the best way to create a strip within an oval using CSS to achieve a partially filled vertical vessel effect?

I need to create an oval shape with a strip inside to represent the level of liquid volume. Here is my initial attempt: <style scoped> .strip:before { position: absolute; background: #343434; border-bottom: 2px solid black; content: ""; ...

css

Create animations for SVG paths and polygons that move along specified paths

I am trying to animate both a path and a polygon in an SVG arrow along the same path. Currently, I have successfully animated the path using CSS, but I am struggling to figure out how to move the polygon along the path at the same pace. <svg id="La ...

cssanimationsvg

Rows in the table are distinguished by varying colors

Is it achievable to replicate this design solely using table CSS style? I am able to assign different colors to even and odd rows, but my goal is to achieve something like this (just the colors): ...

csscss-tables

What is the best way to ensure that my cards maintain consistent proportions?

My cards are not maintaining their proportions, causing buttons to pop out of the card and the card dimensions changing. I realize this issue is due to using fixed width and height in combination with flex. I'm struggling to find the best solution to ...

htmlcss

How to dynamically assign width to elements in a v-for loop in Vue.JS

I am working with HTML code that looks like this: <div v-for="(s, k) in statistics" v-bind:key="s.id" class="single-stat"> <div class="stats"> { ...

cssvue.jsstyleswidth

Background image on webpage failed to load

I've encountered an issue with a background image I downloaded for my website - it simply will not display. Here is the CSS code I am using: background-image: url(Resources/Icons/background-image.jpg); background-attachment: fixed; Even after tryin ...

asp.nethtmlcss

React component that enables radio inputs to repeat upon selection

My current project involves creating a quiz app where users can answer single questions using React on Codepen. I am utilizing an API to fetch a question, along with 3 incorrect answers and 1 correct answer, then storing them in the app's state. Howev ...

javascriptreactjs

Struggling with the addition of the 'Other' option in React manually. Any tips or suggestions?

I've encountered a slight issue regarding the functionality of my React Component below. Specifically, I want users to have the ability to enter a poll category that is not listed in the select component options by using an input field. This scenario ...

javascriptreactjs

Steps to avoid TypeError: e.target.getAttribute is not a function

My goal is to make the inner code (result) function only when a Validity attribute is present. However, my target lacks said attribute, so I'm looking for a way to use an if statement to prevent the inner code from executing. How can I avoid the Type ...

javascriptreactjsreact-native

how can I retrieve only the child route in next js?

Need help with this title. This is my Next JS project and I am working on a custom breadcrumb component. Everything seems to be going well so far, but I am facing an issue with the /people page followed by the /people/roles page. I want to extract only the ...

reactjsregextypescriptnext.js