Parent component in Material-ui theme distinguishing itself from child component of the same type

Question

Parent component in Material-ui theme distinguishing itself from child component of the same type

I'm working on customizing the styling of a Material UI Expansion Panel, specifically to apply my theme only to the main parent panel when it is expanded, and not to any nested panels within it.

For instance:

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

Here's the code for my theme:

const customTheme = createMuiTheme({
  overrides: {
    MuiExpansionPanelSummary: {
      root: {
        minHeight: "0px",
        minWidth: "0px",
        "&$expanded": {
          backgroundColor: "lightblue"
        }
      }
    }
  }
});

I'm struggling to target only the parent ExpansionPanelSummary components with this style, excluding any ExpansionPanelSummary components inside another ExpansionPanel.

Take a look at this sandbox example: https://codesandbox.io/s/mui-how-to-override-tab-theme-sn6pn?fontsize=14&hidenavigation=1&theme=dark

javascript css reactjs material-ui

Answer 1

Answer №1

Here's a method you can use:

import { createMuiTheme } from "@material-ui/core";

const customizedTheme = createMuiTheme({
  overrides: {
    MuiExpansionPanelSummary: {
      root: {
        minHeight: "0px",
        minWidth: "0px",
        "&$expanded": {
          backgroundColor: "lightblue"
        },
        ".MuiExpansionPanelDetails-root &$expanded": {
          backgroundColor: "transparent"
        }
      }
    }
  }
});

export default customizedTheme;

https://codesandbox.io/s/custom-expansionpanelsummary-theme-8okw3?fontsize=14&hidenavigation=1&theme=dark

Answer 2

Here's a method you can use:

import { createMuiTheme } from "@material-ui/core";

const customizedTheme = createMuiTheme({
  overrides: {
    MuiExpansionPanelSummary: {
      root: {
        minHeight: "0px",
        minWidth: "0px",
        "&$expanded": {
          backgroundColor: "lightblue"
        },
        ".MuiExpansionPanelDetails-root &$expanded": {
          backgroundColor: "transparent"
        }
      }
    }
  }
});

export default customizedTheme;

https://codesandbox.io/s/custom-expansionpanelsummary-theme-8okw3?fontsize=14&hidenavigation=1&theme=dark

Parent component in Material-ui theme distinguishing itself from child component of the same type

Answer №1

Similar questions

Upon calling set() on Map, the object returned does not conform to a Map data structure

Adjusting the box sizing of a contentEditable DIV to conceal the first and last characters

The Blueimp File Uploader seems to be sending numerous submissions at once

Issues with Collapse Feature on Bootstrap 3 Navbar

Failed to convert the value "hello" to an ObjectId (string type) for the _id path in the product model

Instagram API: Retrieving a list of recently tagged media only displays content that belongs to me

It seems that Firefox is ignoring the word-wrap style when the class of a child element is changed

Utilizing the Replace function just once

Is there a way to deactivate an ng-click function once it has been triggered within an ng-if ng-switch block?

Adding div elements using checkbox switch

Obtain file paths from a folder using JavaScript

What symbol represents the share function in Unicode?

Modifying a JavaScript code with document.write(variable)

Using Angular 4: Redirecting Menu to Component with Electron

Using .val() in JSON while Html.DropDownList variable is null

Having difficulty retrieving the value of a dynamically selected radio button in AngularJS

Enhance the list visualization in Next.js by efficiently transferring data from child components

What are the steps to allow access to react-native-camera after initially denying permission?

The react-fabricjs package is experiencing some technical difficulties

Tips for transferring parameters to functions within middleware