Is there a way for me to choose all the classNames that conclude with a specific word within the MUI sx property?

I am currently working with MUI and I have a need to modify certain properties that are prefixed with random IDs. How can I target, for instance, the first one using:

'& endsWith(MuiAccordionDetails-root)'

I wish to achieve this because these random IDs are frequently changing

 const Styles = {
accordion:{
  p:0,
  '& .css-15v22id-MuiAccordionDetails-root':{
    p:0,
  },
  '& .css-10gwilr-MuiButtonBase-root-MuiAccordionSummary-root':{
    px: '10px',
  },
  '& .MuiCollapse-root':{
    mx:'20px'
  }
},

}

javascriptcssreactjsmaterial-ui

Answer №1

When working with Mui elements, each element has its own unique classNames like 

MuiCollapse-root MuiCollapse-vertical MuiCollapse-entered css-c4sutr
. These class names are changed in each render, separate from main class names as shown above, allowing you to target specific elements using the following syntax:

const Styles = {
  accordion: {
    p: 0,
    "& .MuiAccordionDetails-root": {
      p: 0
    },
    "& .MuiButtonBase-root- .MuiAccordionSummary-root": {
      px: "10px"
    },
    "& .MuiCollapse-root": {
      mx: "20px"
    }
  }
};

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

How to properly handle sending an empty post request in Angular 2

My current issue revolves around attempting to send data from my application to the server using a POST request, however, the server seems to be receiving empty POST data. This is the function responsible for sending the data: private headers = new Heade ...

javascriptphpjsonangular

The innerHTML of null cannot be set in Vue JS

I am attempting to showcase my array and its modifications after applying various methods <template> <div> <div id="example"></div> <div id="example1"></div> </div> </template> <s ...

javascriptvue.js

How can I create my own unique scrolling behavior in JavaScript?

Looking to create a similar effect as seen on this website: where the vertical scrollbar determines the movement of the browser "viewport" along a set path. I believe that using Javascript to track the scroll bar value and adjust background elements acco ...

javascripthtmlcssinteractive

There is no matching signature for Type when using withStyles

Struggling to convert my React App to typescript, I keep encountering the error below and cannot decipher its meaning. The app functions perfectly in plain JS. My package version is material-ui@next TS2345: Argument of type 'typeof ApplicationMenu&a ...

typescriptmaterial-ui

React - The button requires three clicks for the action to be executed

Currently, I am working on creating a "Rock Paper Scissors" game. Everything seems to be in order, but there is a small issue - when I click a button, such as "Rock", I have to click it three times for it to register the selection. Here is the code snippe ...

reactjs

Having trouble with JavaScript's XMLHttpRequest returning an 'undefined' string on the first run of my script. I need to find a way to ensure that it loads correctly during

Before we dive in, a quick disclaimer: My knowledge of JS is limited, and I typically learn on the go when creating scripts. However, my usual method didn't work this time. Currently, I'm working on a small JS script that will function as a book ...

javascriptjsonxmlhttprequest

Having trouble with the Tailwind transition in my Next.js component

I'm facing an issue with the ease out transition not working as expected. I need the side to slide in from left to right with a duration of 500ms. Despite trying various solutions, I can't seem to figure out why it's not functioning properly ...

cssnext.jstailwind-csstailwind-ui

What is the reason why calling setState does not update the local state?

Hello everyone, I came across an intriguing React task and I'm struggling a bit with finding the solution. Task: Can you figure out why this code isn't working and fix it? Code: class BugFixer extends React.Component { constructor(props) { ...

javascriptreactjs

A guide on obtaining the date format according to locale using Intl.DateTimeFormat within JavaScript

Can someone assist me in obtaining the standard date format (such as MM/DD/YYYY) based on a specified local id? The code snippet provided below is not returning the desired format. Any guidance on how to achieve this would be greatly appreciated. var da ...

javascriptangulartypescriptinternationalization

Nuxt 2.5 and higher do not recognize the definition of Global

After utilizing Nuxt 2.1 in my app, I proceeded to upgrade it gradually and everything was fine until Nuxt 2.4. However, starting from version 2.5 and above, production builds are breaking with an error stating global is not defined. The location of the e ...

javascriptvue.jswebpackbabeljsnuxt.js

Response from Vimeo's AJAX API

I am having trouble retrieving the AJAX response from Vimeo to extract a thumbnail without using JQuery. Even though I can see the response data in JSON format when I type the response query (http://vimeo.com/api/v2/video/30408418.json) into the browser an ...

javascriptajaxjsonpvimeo

Scrollbar generation causing spacing issues in Internet Explorer

So I've been working on implementing a scrollable div with a specific code overflow: auto; However, for some reason, when viewed in Internet Explorer, the scroll creates an unexpected margin on the right side. It functions properly on both Chrome an ...

htmlcssinternet-explorerscrolloverflow

Having trouble submitting the edit form

I had the idea to create an edit form that would replace the existing data in a table for editing. However, I am facing issues with getting the form to submit properly even though the create form is functioning correctly. Below is the code snippet that I n ...

javascriptc#jqueryajaxasp.net-mvc

Background image of HTML Iframe element does not display - Inline style block

https://i.stack.imgur.com/JW26M.png After setting the iframe's innerHTML using this line of code: iframedoc.body.innerHTML = tinyMCE.activeEditor.getContent(); The styles for the elements within the iframe are contained in an inline style block. Ho ...

javascriptjqueryhtmlcssiframe

Changing the position of a sprite using jQuery

Looking for assistance in moving the scroll location onClick of another div using jQuery. The image is a sprite. .top-background{ background: url("../images/mainall.jpg") no-repeat scroll 0px 0px transparent; height: 888px; width:1024px; } ...

jquerycssattributessprite

"Server request with ajax did not yield a response in JSON format

http://jsfiddle.net/0cp2v9od/ Can anyone help me figure out what's wrong with my code? I'm unable to see my data in console.log, even though the network tab in Chrome shows that my data has been successfully retrieved. Here is my code snippet: ...

javascriptjqueryajaxjson

tips for incorporating async/await within a promise

I am looking to incorporate async/await within the promise.allSettled function in order to convert currency by fetching data from an API or database where the currency rates are stored. Specifically, I want to use await as shown here, but I am unsure abou ...

javascriptnode.jsexpressasync-awaitpromise

Creating a Unique Visual Design for Toggle Buttons

I am encountering issues while trying to achieve a custom styling for a Toggle Button in my React application. The current implementation involves using Material-UI and styled-components. Current Approach: To customize the appearance of the Toggle Button ...

reactjsmaterial-ui

Creating two divs with equal heights in React using Material-UI at 50% each

I am currently utilizing a Material UI template within a react JS project. My goal is to create a div (or Grid in MUI) that spans 100% of its container's height, containing two nested divs (or Grids) that are each set at 50% height. If the internal c ...

cssreactjsmaterial-ui

Searching for a column fails to yield any results after altering the value in

Here is a snippet of code that I am working with: <!DOCTYPE HTML> <html lang="en"> <head> <title> Exact matches overview </title> <script type="text/javascript" src="/static/s ...

javascriptjqueryhtmldatatables