I have two lists of accordions. I want both accordion sets to be in sync with each other. For example, if I open accordion 1 in the left, I want accordion 1 in the right to be open and vice versa. I am already maintaining the state to keep the accordions open by default Please help me on what I am doing wrong.

I have two lists of accordions. I want both accordion sets to be in sync with each other. For example, if I open accordion 1 in the left, I want accordion 1 in the right to be open and vice versa. I am already maintaining the state to keep the accordions open by default Please help me on what I am doing wrong.

I have the following code in React MUI:

I have the following code in React MUI:

Currently I am working on a search bar component which will be integrated with an api which will return results which might have an nested option. The problem is MUI autocomplete doesn’t support nested options by default. I tried some work arounds and the best I could come with is something like this

ui and was wondering how I can align this component so it has the same styles as other components. I tried wrapping it with a div but that doesn’t seem to work.

I am using Material UI (v5) and React, and want to find the best/most elegant way to make two Container (or potential Box or any other container-style element) components overlap.
So there’s one parent with two child containers, which each have some kind of media element in it (not just an image, so this cannot be done with a simple background-image).

I have a theme like this, created using experimental_extendTheme of MUI:

I am trying to recreate this but can only produce this.

I am currently working on changing the collapse direction for a MUI Accordion from being top to bottom to be bottom to top. Is there anyway to implement this in MUI React? if there isn’t, is there any alternatives to this behavior?