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

From jQuery to ReactJS: Migrating to a Modern

As I venture into converting existing jQuery code to React.js, I must admit that I am quite new to React and still in the learning phase. So please bear with me if my questions sound a bit silly. Here is the structure I am working with: <ul> &l ...

javascriptjqueryreactjs

Encountering an issue with Material-UI and Next.js: "TypeError: theme.spacing is not a function

Encountering an issue after modifying _app.js to dynamically generate a material UI theme. I've been following the implementation example provided by the material-ui team at: https://github.com/mui-org/material-ui/tree/master/examples/nextjs. To summ ...

javascriptreactjsmaterial-uinext.js

Export interface for material-ui wrapper to cast any type in TypeScript (React)

I work with React using TypeScript. Recently, I encountered an issue with exporting. I'm creating an interface that encapsulates components from Material-ui. Here is a simplified example: Wrapping.tsx import { default as Component, ComponentProps ...

typescriptimportexportmaterial-ui

How Can You Update the State of a Parent Component from a Child Component?

My Objective In the initial component, I retrieve items with a status of 2 and display them as checkboxes. In the subsequent component, I update the status of these items to 3. In the third component, a modal opens after the status change from the secon ...

javascriptreactjsreact-native

Updating the state in React following an API call

I've attempted multiple methods to update the state, but it seems that it never actually changes. Below is the JSON data that I am trying to update my state with: export class Provider extends Component { state = { posts: [], profileinfo: { ...

reactjsexpressaxios

navigation menu 'selective emphasis' feature

I have created a JQuery script that will highlight the 'About', 'My Projects', or 'Contact Me' text on the navigation bar when the corresponding section of the page is in view. To achieve this, I am using a scroll() event list ...

javascriptjquerycsstwitter-bootstrap

Managing HTTP errors using async/await and the try/catch block in a React application with TypeScript

Below is a snippet of code I am working with! import React, { useState } from "react"; function App() { const [movies, setMovies] = useState([]); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState<string ...

reactjstypescriptasync-awaittry-catchhttp-error

"Applying CSS styles to expand the size of

Is there a way to prevent the blue div from overflowing the red div, but still always fill its parent container? I searched on stackoverflow and found suggestions to use height: 100%, but this causes issues when the child element has padding. How can this ...

htmlcss

utilizing the setState function to insert an object into a deeply nested array

Currently, I am utilizing iReact setState to attempt posting data to my object which consists of nested arrays. Below is how my initial state looks: const [data, setData] = useState({ working_hours: [ { id: '', descrip ...

javascriptreactjs

Adjust the color of a label based on a set threshold in Chart.js

Can anyone help me with my Chart.js issue? Here is a link to the chart: I am trying to change the color of the horizontal label when it falls between 70.00 - 73.99. Does anyone know if there's a specific option for this in Chart.js? Thanks! ...

javascriptcssgraphchart.js

Unable to combine mui theme with emotion css prop

I recently made the switch from overwriting styles in my styles.css file with !important to using emotion css prop for implementing a dark theme in my web app. Below is the code snippet from App.tsx where I define my theme and utilize ThemeProvider: const ...

reactjstypescriptmaterial-uiemotion

Storing the value from the INPUT field in the state of React is not permitted

I'm attempting to retrieve the user input value from the INPUT field and update it in the corresponding state. However, no matter what I type in the field, it doesn't get set to the state. createForm(x){ var dx = 'd'+x let da ...

javascriptreactjs

Interacting with the header component within the renderHeader property of the MUI Data Grid Pro will update the sortModel

Currently, I am utilizing the Material UI DataGridPro component to construct a React Js application. I am interested in developing a customized filtering feature. In the image below, you can see a red box representing an IconButton for the filtering view ...

javascriptreactjsmaterial-uimui-x

Identifying URL modifications in a UmiJS React web application: a step-by-step guide

In my application, I have a file called BasicLayout.jsx which passes props to the main components and renders child components within the layout. I am looking for an effective way to detect URL changes using the useLocation hook in the useEffect() of Bas ...

reactjsreact-hooksumijs

Establish a predetermined selection for a radio button and its associated checkbox option

I am working on a React material UI group input field that is mapping a dataset. The result consists of one radio button and one checkbox performing the same action. Initially, I attempted to set the state to establish one data item as default. While I fol ...

javascriptreactjsmaterial-ui

What is the best way to define relative paths for content like CSS files?

Whenever I link to a file, I always find myself having to include the entire absolute path like this <link rel="stylesheet" type="text/css" href="F:/XmppOld/XAMPP2/htdocs/MAIN_SITE_LAYOUT/css/stylemainpage.css" /> I want to simplify it to ...

htmlcss

Displaying a PDF in a React application using content stored on IP

I'm having trouble displaying a PDF file that is stored on IPFS in React using the React PDF package. Here is my code: <div> <Document file={"https://ipfs.io/ipfs/" + this.state.IPFSlink} onLoadSuccess={this.onDocumentLoadSuccess} ...

reactjspdfipfs

After attempting to refresh the webpage with the F5 key, I noticed that the jQuery progress bar was not functioning properly. Additionally, the webpage failed to display any

Trying to implement a web loading bar using jQuery on my website was initially successful, but I encountered an issue when reloading the page with F5. The progress bar would not work and the webpage displayed only a white background. Below is the code snip ...

javascripthtmljquerycss

How can a parent component trigger an event in a child component in ReactJS?

I am looking for a way to trigger a function in the child component from a parent button, but I haven't been able to figure it out. I've looked at some examples, but they only deal with property changes. Here is my code Parent: import React f ...

reactjs

CSS: The Drop Down menu suddenly vanishes every time I attempt to select an item from the visible list

I'm facing an issue with my dropdown menu that I can't seem to resolve. Whenever I hover over the menu, it disappears before I can even click on any items. <ul id="menu"> <li><a href="#title">Home</a></li> ...

htmlcss