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

https://i.sstatic.net/rO63e.jpg 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

"Galaxy S9 users experience a frustrating issue where the keyboard suddenly vanishes in a react-native

When using a Galaxy S9/S8, I noticed that when the Android bottom navigation bar is hidden and I click on a TextInput, the keyboard quickly disappears and I am unable to type. However, if I pin the bottom navigation bar, the problem no longer occurs. For ...

androidreactjsreact-nativekeyboardgalaxy

Having trouble bundling a React component with Tailwind CSS using Rollup for npm package deployment?

Background: I'm currently working on developing an NPM package for a React component that integrates Tailwind CSS. After installing the package, the HTML of the component appears correctly, but the Tailwind styles are not being applied as expected. I ...

reactjsnpmtailwind-cssrollup

Struggling with JQuery to revert an element back to its original position after the mouseout event

Hello all, I'm a newcomer here and I've been trying my hand at some basic JQuery. However, I've encountered an issue that I could use some help with. Have you ever come across those boxes on websites where when you hover over them, an arrow ...

javascriptjquerycssjquery-animateslide

The pairing of Transpiller and Internet Explorer 8 is like a dynamic

In starting my new project, I am considering using BabelJS. However, there is a significant requirement that must be met: it needs to be compatible with IE8. ISSUE: Babel compiles ES6 to ES5, but the support for ES5 on IE8 is lacking. Are there any alter ...

javascriptinternet-explorer-8coffeescripttypescriptbabeljs

Is there a way to ensure that the height of my images matches exactly with its width?

Is there a way to ensure that the height of my images always matches their width? I need the height of the images to dynamically adjust and match the width, even when the window is resized. For example, if the image width is 500px, the height should also ...

htmlcss

Guide on positioning a material icon inside a FlatButton using FlexBox

I'm struggling to center a Google material icon inside a material-ui FlatButton using FlexBox. I've attempted various combinations, but the result is always the same -- the icon ends up at the very bottom of the button. I'm unsure if this is ...

flexboxmaterial-ui

Function not currently in operation

There seems to be an issue with the script not running or returning any answers. The console is blank. I am attempting to retrieve an answer from the Yandex Translate site (https://tech.yandex.com/translate/doc/dg/reference/translate-docpage/) Code: http: ...

javascriptangularjsapiyandexyandex-api

The benefits of NEXTJS Server Side Rendering include providing clear and defined content

Even though I've followed the solution provided above for fetching data, I still end up receiving 'undefined' instead of the actual data. Interestingly, when I make the same request using Postman or Thunderclient, it returns a success with s ...

reactjsnext.jsundefinedserver-side-renderingget-request

Invoke a function from a different vue.js component using the this.$refs property

I'm facing an issue with triggering a sibling element. What I've tried so far <b-img @click="callFileLoader"/> <b-file type="file" ref="fileUploader"></b-file> ... methods:{ callFileLoader () { this.$refs.fileUploader.c ...

javascriptvue.jsvuejs2vue-componentbootstrap-vue

Having trouble pinpointing the issue with this particular if statement?

I am currently working on creating a form that compiles all entered data when the user fills out all fields. The form is connected to a PHP file and functions properly, but I encountered issues when implementing validation logic. The "Validation" section ...

javascriptphphtmlformsif-statement

The webpage is unreachable on localhost after attempting to write to a file using node.js

I'm currently attempting to update a file using Node.js. I have a form that contains checkboxes, and upon form submission, the server should update the file based on which checkboxes are selected: a, b, or c. The JSON file structure is as follows: { ...

javascriptnode.jsexpress

What is the best way to manage zoom settings following a completed search query?

Whenever I try to search for an address using this map, it zooms in way too much making the map unusable. Despite my efforts to adjust the map bounds, I have not been successful. It seems like I am on the right track but for some reason, it just isn't ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

Error encountered: MongoDB cast exception - nested subdocument

Check out this schema design: var messageSchema = new Schema({ receivers: [User], message: String, owner: { type: Schema.Types.ObjectId, ref: 'User' } }); var userSchema = new Schema({ name: String, photo: String }); var in ...

javascriptmongodbmongoose

When utilizing Next.js with TypeScript, you may encounter an error message stating that the property 'className' is not found on the type 'IntrinsicAttributes & IntrinsicClassAttributes'

I recently put together a basic nextjs app using typescript. Here's the link to the example: https://github.com/zeit/next.js/tree/master/examples/with-typescript However, I encountered an issue where I am unable to add the className attribute to any ...

reactjstypescriptnext.js

Tips for fixing alignment problems using CSS

I am experiencing a problem where I am unable to figure out how to align the content in one column with text positioned next to it in a right-aligned format. /* Personal Details */ .personal-info { width: 90%; padding: 25px; border-bottom: 1px so ...

htmlcss

React Material Design Theme Selector

Recently, I've been utilizing react material for my application and everything has been smooth sailing so far. However, I have a new challenge - I want to create an application where users can store themes on the back-end and load them based on their ...

reactjsmaterial-ui

Why is my JSON object being mistakenly interpreted as a string literal during iteration?

I'm facing a seemingly simple question but I can't seem to figure it out. Below is the jQuery code I am working with: $(function() { $.get(urlGetContainerNumbers, function(data) { console.log(data); for (var idx = 0; idx &l ...

javascriptjqueryjson

Clearing FullCalendar events when the month button is pressed: A step-by-step guide

What is the best way to hide ONLY events on a calendar? I was considering deleting all events when the user clicks the "month" button. How can I achieve this functionality? $scope.uiConfig = { calendar: { height: 450, editable: false, ...

javascriptangularjseventsfullcalendar

Adding HTML after the last item in an ng-repeat directive in AngularJS

After incorporating the Instagram API to generate a Load More Button for displaying recent media, I am facing an issue where it overlaps with the ng-repeat and fails to append a new line after the last ng-repeat. I would be grateful for any assistance. Th ...

javascriptangularjspagination

Does the Higher-Order Component support array input?

As a newcomer to React and the higher order components (HOC) pattern, I have been exploring ways to connect components using `` tags to visually separate them. Here is the setup I currently have: import React, { Fragment } from 'react'; const w ...

reactjshigher-order-components