Changing the designated materialUI class

Within the project, I am utilizing this theme:

export const theme = createMuiTheme({
  ...defaultThemeConfig,
  overrides: {
    ...defaultThemeConfig.overrides,
    MuiListItem: {
      root: {
        '&:nth-child(odd)': {
          backgroundColor: colors.greyLight,
        },
      },
    },
  },
});

I aim to override it in my styles.ts file as follows:

export const useStyles = makeStyles(({ spacing, breakpoints, palette, zIndex }: Theme) => ({
  MuiListItem: {
    root: {
      '&:nth-child(odd)': {
        backgroundColor: 'none',
      },
    },
  },
}));

I have also attempted these approaches:

'& MuiListItem': {
  root: {
    '&:nth-child(odd)': {
      backgroundColor: 'none',
    },
  },
},

And these variations as well:

'.MuiListItem-root': {
  '&:nth-child(odd)': {
    backgroundColor: 'red',
  },
},
'& .MuiListItem-root': {
  '&:nth-child(odd)': {
    backgroundColor: 'red',
  },
},
'&.MuiListItem-root': {
  '&:nth-child(odd)': {
    backgroundColor: 'red',
  },
},

Despite trying multiple methods, none seem to be working. Any insights on where I might be going wrong?

javascriptcssreactjsmaterial-ui

Answer №1

makeStyles is a helpful tool that alters class names to avoid clashes with existing ones. This can cause your custom styles to be overridden by the default classes, such as MuiListItem-root-123. If this is happening to you, consider using !important in your CSS declarations. Another option is to follow this pattern for overriding classes:

const useStyles = makeStyles(() => {
  listItemRoot: {
    backgroundColor: 'blue'
  }
})

function Main() {
  const classes = useStyles()
  return <ListItem classes={{ root: classes.listItemRoot }} />
}

Answer №2

After attending a different class that I didn't think was important, I finally found the best solution:

mobileListItem: {
  '&:nth-child(odd)': {
    backgroundColor: 'inherit',
  },
  cursor: 'pointer',
},

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

Leverage express for proxying websocket connections

Currently, I am facing a situation where my data provider gives me stock prices through a TCP connection but only allows a static IP to access their service. Since I need to format the data before sending it to my front-end, I plan to utilize my express ba ...

javascriptnode.jsexpresswebsocket

Activate JavaScript validation

Within each section (displayed as tabs), I have a custom validator. When one tab is active, the other is hidden. To proceed to submission, I need to disable client validation for the inactive tab. I attempt to do this by calling ValidatorEnable(, false); ...

javascriptjqueryasp.net

Can Vue-router be used to load screens into Tabs?

In my setup, I have a routes file with multiple routes configured such as localhost:8000/test and localhost:8000/test2. My objective is to create a final route like localhost:8000/tabs, where I can utilize a tab library like bootstrap or Vuetify to displa ...

javascriptvue.jsvuejs2vuetify.jsvue-router

How can you access a sibling of the parent element of the current element in Jquery?

I'm working on an HTML project where I have a select field. Depending on the option selected, I need to update the price field with the corresponding price fetched using Ajax. Additionally, I want to be able to input multiple rows by clicking on the ...

javascripthtmljqueryajax

Bootstrap Button Problem: Difficulty arranging buttons in a neat way, unable to position them next to each other

I'm currently working on a real estate website project and have designed a Photoshop template which is uploaded on Behance. Check it out here. Right now, I'm creating the static version of the real estate store template and facing an issue with ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Strange activities observed during the management of state in react hooks, where the splice() function ends up eliminating the

My current setup involves maintaining a state to handle the addition of new JSX elements: const [display, setDisplay] = useState<IDisplay>({ BookingFormDropDown: [], } ); I have a function in onClick() which adds an elem ...

reactjstypescriptreact-hooks

Loading animation for fetchAll() function in a web application built with React and Redux using Axios

I am working on a simple react-redux app with an asp.netcore back-end and I am looking to implement a loading indicator like a spinner or icon to display before the data is loaded. The component in question is Courses.jsx import React, { useState, useEffec ...

reactjsmaterial-uireact-hooksspinner

Convert an array of JSON objects into a grid formatted time table using the

I am using Next.js 10 to create a timetable or schedule similar to the one below: bus stop time 1 time 2 time 3 {props[0].bus stop} {props[0].times[0]} {props[0].times[1]} {props[0].times[2]} ... {props[1].bus stop} {props[1].times[0]} {props[1] ...

javascriptarraysnext.jscss-gridarray.prototype.map

Creating a Piechart in Kendo UI that is bound to hierarchal remote data

I am facing an issue with binding remote data to a pie chart while managing a grid with dropdown sorting options. The grid is working fine, but I am unable to display the hierarchical data on the pie chart as categories. <!DOCTYPE html> <html> ...

javascripthtmlkendo-uipie-chart

Ways to verify the existence of a username in WordPress without the need to refresh the page

How can I check if a username exists in the database without refreshing the page in a Wordpress form using AJAX? I've tried implementing AJAX in Wordpress before but it didn't work. Can someone provide me with a piece of helpful code or a link to ...

javascriptphpjqueryajaxwordpress

Issue with dropdown menu appearing beneath specific elements in Internet Explorer versions 7 and 8

I've been encountering some troublesome issues with a website I'm working on, specifically in Internet Explorer 7/8. On certain pages, the navigation elements are getting hidden below text and images, causing confusion for me. I've attempted ...

css

Initiate the Bull Queue Process upon launching the Application

As I develop my API, I am setting up a queue and adding jobs to it. Additionally, I have configured the API to start processing these jobs as soon as they are added. const newQueue = createQueue(queueName, opts); newQueue.add('JokesJob', data, o ...

javascriptnode.jsqueuebull.jsbull-queue

Customize the appearance of the "Collapse" component in the antd react library by overriding the default styles

Incorporating JSX syntax with *.css for my react component. Displayed below is the jsx code for the antd collapse section. <Collapse defaultActiveKey={["1"]} expandIconPosition="right" > <Panel header="This is p ...

javascripthtmlcssreactjsantd

How can we ensure in ReactJS that one API call has been completed before making another one?

How can we ensure one API call is completed before making the next call in reactJS? In my componentDidMount function, I need to check the length of data. When the length is more than 4, I first want to save the data and then retrieve it. componentDidM ...

reactjstypescript

How can I retrieve a PDF from a URL provided by the server using AngularJS?

Is it possible to automatically download a PDF file from a URL received through a $http GET() request from the server? The $http request is triggered by clicking a button on the front-end, and upon successful completion of the request, the URL where the PD ...

javascriptphpangularjshtmllaravel

Tips for optimizing the "framerate" (setInterval delay) in a JavaScript animation loop

When creating a JavaScript animation, it's common practice to use setInterval (or multiple setTimeouts) to create a loop. But what is the optimal delay to set in these setInterval/setTimeout calls? In the jQuery API page for the .animate() function, ...

javascriptjquery

Utilize React Hook Form to easily reset the value of an MUI Select component

I created a dropdown menu where users can select from "Item 1", "Item 2", and "Item 3". Additionally, there is a "Reset" button that allows users to clear their selection and make a new one. Below is the code I used: import React from ...

javascriptreactjstypescriptmaterial-uireact-hook-form

Encountering installation issues with npm for bcrypt installation due to a

While working on an Express JS project, I encountered issues trying to install the bcrypt module for data authentication. Despite multiple attempts, I kept receiving the same errors. [email protected] install /media/iron/1d6c195f-2350-423c-a3f0-050 ...

javascriptnode.jsexpress

Encountering an issue with Meteor and node-celery: "Unable to access property 'slice' of null"

Check out the Github repository for reproducing this issue Run localhost:3000 to replicate the problem. In my setup with Meteor 1.4.4.1, I am utilizing the node-celery npm packages on the server side. Upon Meteor initialization, the client automatically i ...

javascriptnode.jsmeteorcelery

Why does the col-sm-* class affect the appearance on extra small screens?

For a current project, I have incorporated bootstrap into my design and have set up varying column widths for xs, sm, and md screens. Initially, I utilized col-xs-* and col-md-* to ensure the columns resized appropriately for xs, md, and lg screens. Howeve ...

htmlcsstwitter-bootstraptwitter-bootstrap-3