The CSS class name carries less specificity compared to the CSS classes in material-ui version 5

While utilizing IconButton from @material-ui/core in my React application, I assigned the className classes.myCloseButtonstyle. However, it appears that this specific class has a lower specificity compared to the CSS classes 

.css-1743419-MuiButtonBase-root-MuiIconButton-root
(refer to the screenshot below).

https://i.sstatic.net/s7RnT.png

Upon checking the documentation here at https://next.material-ui.com/components/dialogs/#customized-dialogs, I noticed that the order is different than what was displayed in the aforementioned screenshot. In the material ui example code, the classes.myCloseButtonstyle actually takes precedence over the 

.css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root
classes (see the screenshot below).

https://i.sstatic.net/8Lkhy.png

I am puzzled by what might be going wrong in my React Material UI setup. My main goal is to ensure that classes.myCloseButtonstyle gains higher specificity. To clarify, I aim to reverse the order of 

.css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root
and classes.myCloseButtonstyle.

Here is the correct styles order based on the material-ui doc:

  1. classes.myCloseButtonstyle

2.

.css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root

And here is how the styles are currently ordered in my app:

  1. .css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root
  2. classes.myCloseButtonstyle

I urgently need to rearrange the order as follows:

  1. classes.myCloseButtonstyle
  2. .css-1uaxfgw-MuiButtonBase-root-MuiIconButton-root
javascriptcssreactjsmaterial-uimaterial-design

Answer №2

If you want to boost the importance of a CSS class, you must enhance its specificity.

For more information on how to increase specificity, visit this article.

In the meantime, consider using button.myCloseButtonstyle in your CSS file to elevate the priority of the class and address your issue.

Answer №3

To enhance specificity, consider specifying a path like this:

div > div > buttonm.makeStyles-myCloseButtonStyle-23

Alternatively, you can increase specificity by repeating the class name:

div > div > buttonm.makeStyles-myCloseButtonStyle-23.makeStyles-myCloseButtonStyle-23

According to w3org guidelines:

Note: It is permissible to repeat the same simple selector multiple times, and doing so will indeed boost specificity.

Answer №4

After encountering a similar issue, I discovered the solution. All I had to do was include StyledEngineProvider and set injectFirst like so:

<StyledEngineProvider injectFirst>
    <ThemeProvider theme={customTheme}>
      <BrowserRouter>
        <App />
      </BrowserRouter>
    </ThemeProvider>
 </StyledEngineProvider>

You can find more information in the documentation provided at: https://mui.com/material-ui/migration/v5-style-changes/#style-library Shoutout to @Paolo Forgia for highlighting this important detail.

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

Tips for handling an InvalidSelectorException in Selenium when logging into a website

I've been working on automating website logins using Selenium and here is the code I have written: from selenium import webdriver driver = webdriver.Chrome() driver.get("https://abcde.com") assert "xxx" in driver.title user = driver.find_element_by ...

javascriptpythonselenium

Display different data in an HTML table for each individual click on the "Read more" event

I am currently extracting data from a SQL table to exhibit it in an HTML table. The issue I am facing is that I would like to implement a "Read More" feature to prevent clutter in the table. As I am retrieving the data row by row, I am utilizing a class n ...

javascriptphpjqueryhtml

The JSX component cannot utilize 'Home' when working with React and TypeScript

I am a beginner in using React and TypeScript, and I want to retrieve data from an API and display it in a table using TypeScript and React. My project consists of two files: Home.tsx and App.tsx. The primary code that interacts with the API is located in ...

reactjstypescriptapi

When displaying multiple images using HTML5 Canvas in a for loop, only the final set of images is drawn

I'm facing an issue with drawing images using an image loader inside a for loop. The images are only being drawn on the last iteration. The console is not displaying "draw -> 0" or "draw -> 1", it only shows "draw -> 2" Any assistance would ...

javascriptjqueryhtmlcanvas

Tab button that can be easily printed

I'm currently facing a challenge with my HTML code on my website. I have 5 tabs already set up, but I want to add one that redirects users to a printable page that opens the print menu specific to their browser. It seems like there might be an issue i ...

htmlcssprintingtabsuser-controls

What is the best way to dynamically add getJSON's data to a div whenever the loadmore button is clicked?

When a page loads, my getJSON function displays its output in a div called myDiv. Now, I am looking to add a button at the bottom of the page. When the user clicks this button, I want to trigger another call to getJSON. Each time the button is clicked, I ...

javascriptjqueryhtmlajaxgetjson

Constructing a genealogical chart using a collection of items

Currently, I am working on constructing a family tree using an array of objects in JavaScript. This data is retrieved from a MySQL database and accessed through a PHP page. The information is transmitted from PHP to JavaScript in the form of an array of o ...

javascriptphpmysqlarraysobject

I am currently encountering an issue when attempting to run my React project using Yarn. What steps should I take to resolve this error?

As I attempt to launch my React project using YARN, an error is thrown stating that react-scripts.js already exists in the file. What steps should I take to address this issue? Click here for an image of the error ...

reactjsnpmerror-handlingyarnpkgyarn-workspaces

Adjust the dimensions of the traffic signal

I'm facing an issue with my code where the traffic light appears too large and the buttons are positioned too far apart. I attempted adjusting the PX values, but this resulted in the traffic light shapes becoming squares instead of circular and smooth ...

javascriptcss

Formatting issue with selecting checkboxes in Primefaces DataTable filter menu

I decided to replicate the Primeface showcase for filters on my Local JBoss installation by referring to the link provided below: http://www.primefaces.org/showcase/ui/data/datatable/filter.xhtml. However, I encountered an issue where my selectCheckboxMenu ...

cssjsfprimefaces

What is the process for reaching individuals within a nested object?

I have been struggling to access the elements of a nested object without any success. Despite looking through similar questions on stackexchange (such as this), I have not been able to resolve my issue. I attempted to access the final element using console ...

javascriptarraysjsonobjectnested

The issue with JQGrid: Inaccurate selection of drop down value when edit type is set to 'select'

I am currently using JQGrid 4.4.4 and have encountered an issue with a column set to edittype = 'select'. While the value displayed in the grid row is correct, the drop-down or combo-box value is being set to the wrong value when editing the row. ...

javascriptjqueryjqgrid

Can we selectively execute certain tests in Cypress using support/index.js?

I need to selectively run certain tests from a pool of 50 test files located in the integration folder. Specifically, I only want 10 of them to execute. In an attempt to achieve this, I am trying to configure the selection process within the support/index. ...

javascriptnpmcypressconfigtest-runner

Receiving the output from the axios function in ReactJS

I am a newcomer to reactJS and I'm encountering an issue where I am trying to assign a value to my variable that is returned from an axios function. However, when I attempt this, the variable u1 ends up as undefined. function fetchUsername(userid){ ...

reactjs

Adaptable Bootstrap Button that Adjusts to Different Screen Sizes

I want this button to adjust its size according to the screen dimensions. The current code keeps the button fixed in place. See below for the code snippet. <button type="button" [className]="'btn btn-block m-0'" kendoButton ...

cssangularresponsive-designbootstrap-5

Ways to personalize the interface following the selection of an item from a dropdown menu

Currently, I am using Vue.js and Typescript for my project work. I have a requirement to customize the interface by making adjustments based on the selected item from a drop-down list. <b-form-select id="input-topic" ...

javascripttypescripttwitter-bootstrapvue.jsvue-component

Save canvas as an image, with the option to incorporate additional text from a textarea element on the page into

I am currently working with a canvas element using Fabric.JS. Beneath the canvas on the screen, there is a textarea within the DOM. The download button on the page successfully downloads the canvas element as an image. However, I now need to include the t ...

javascriptcanvasdownload

How can you write a parameterless function in Ramda using a point-free style?

Take a look at this functioning code snippet: var randNum = x => () => Math.floor(x*Math.random()); var random10 = randNum(10) times(random10, 10) // => [6, 3, 7, 0, 9, 1, 7, 2, 6, 0] The function randNum creates a random number generator that wi ...

javascriptfunctional-programmingramda.js

What is the best way to extract data from user input and display it in a table modal?

I need to retrieve all the values from the 'input' fields and display them in a modal table using JavaScript. What is the best way to achieve this? Here is my current script: <script> $(document).ready(function() { ...

javascriptjquerybootstrap-4

Implementing dynamic class bindings with Vue.js using v-for

I am currently using a v-for loop in Vue.js to create a list of items populated with data from an API. Here is an example of the items array: items: [ { foo: 'something', number: 60 }, { foo: 'anything', ...

javascriptvue.jsv-for