How to customize the arrow color of an expanded parent ExpansionPanel in material-ui

Currently facing a challenge in customizing material-ui themes to achieve the desired functionality.

The goal is to have the expansion panels display a different arrow color when expanded for improved visibility. However, this customization should be applied only to parent expansion panels and not nested ones.

Presently, the theme has been set up so that only parent expansion panels change color upon expansion: https://i.stack.imgur.com/rjax0.png

The issue lies in the fact that the black arrow becomes difficult to see against the dark-blue panel summary background. To address this, I aim to adjust the arrow color to white, but only within parent panels. In essence, whenever an ExpansionPanelSummary appears blue, its arrow should be white.

I have attempted to locate a CSS control element that allows me to achieve this. Below is the snippet from my theme for ExpansionPanelSummary, which manages the color (I suspect the CSS defining the arrow might be present here, though I'm uncertain):

      MuiExpansionPanelSummary: {
        root: {
          minHeight: "0px",
          minWidth: "0px",
          "&$expanded": {
            //Elevation 1
            boxShadow:
              "0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12)",
            minHeight: "0px",
            backgroundColor: "#3f51b5",
            color: "white"
          },
          ".MuiExpansionPanelDetails-root &$expanded": {
            backgroundColor: "transparent",
            color: "black"
          }
        },
        content: {
          minWidth: "0px",
          margin: "8px 0px",
          "&$expanded": {
            margin: "8px 0px"
          }
        }
      },

Any assistance or guiding insights on how to achieve this would be greatly appreciated.

javascriptcssreactjsmaterial-ui

Answer №1

To achieve the desired result, one approach is to utilize the 

MuiExpansionPanelSummary-expandIcon
class for targeting the icon and resetting it to the default style in the nested expansion panel.

import { createMuiTheme } from "@material-ui/core";
const defaultTheme = createMuiTheme();

const myTheme = createMuiTheme({
  overrides: {
    MuiExpansionPanelSummary: {
      root: {
        minHeight: "0px",
        minWidth: "0px",
        "&$expanded": {
          //Elevation 1
          boxShadow:
            "0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12)",
          minHeight: "0px",
          backgroundColor: "#3f51b5",
          color: "white",
          "& .MuiExpansionPanelSummary-expandIcon": {
            color: "white"
          }
        },
        ".MuiExpansionPanelDetails-root &$expanded": {
          backgroundColor: "transparent",
          color: "black",
          "& .MuiExpansionPanelSummary-expandIcon": {
            color: defaultTheme.palette.action.active
          }
        }
      }
    }
  }
});

export default myTheme;

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

Answer №2

import { React, Component } from 'react'; 
import { withStyles } from '@material-ui/core/styles';
import Accordion from '@material-ui/core/Accordion';
import AccordionSummary from '@material-ui/core/AccordionSummary';
import ExpandMoreIcon from '@material-ui/icons/ExpandMore';

const styles = {
    expand_icon : {
        color: "white"
    }
}

class CustomListComponent extends Component {

    render() {
        const { classes } = this.props;
        return (
            <div>
                <Accordion className={classes.custom_accordion}>
                    <AccordionSummary
                        className={classes.custom_accordion_summary}
                        expandIcon={<ExpandMoreIcon className={classes.expand_icon} />}
                        aria-controls="panel1a-content"
                        id="panel1a-header"
                     >
                        <Typography></Typography>
                    </AccordionSummary>
                 </Accordion>
             </div>
         )
     }
 }

export default withStyles(styles, { withTheme: true })(CustomListComponent);

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

Navigate to the following slide by clicking on BxSlider

Looking to enhance the navigation on my slideshow by using the slide itself as a next button, instead of relying on traditional prev/next controls. Although it seems like a simple feature to implement, I'm struggling to make it work. This is my curre ...

javascriptjquerysliderbxslider

Inform registered customers by utilizing AngularJS (angular-websocket-service) and Spring Boot to implement Websockets notifications

Exploring the world of AngularJS and FullStack development is an exciting journey for me. The architectural setup of my current app is already in place and ideally should not be altered (for security reasons). I've been able to send messages to the se ...

javascriptangularjswebsocketspring-bootspring-websocket

What is the best method to create random coordinates that fall outside of the circle located within a rectangular area?

Suppose the following scenario: A rectangular area with dimensions length l and breadth b A circle with a radius r The circle is positioned inside the rectangular area as depicted in the image below Check out the image here - Red areas show expected even ...

javascriptmathgeometry2dpolar-coordinates

How can I maintain focus selection while replacing HTML with text in a contenteditable div without losing it?

When working with a div tag that needs to be editable, the goal is to prevent users from entering any HTML into the tag. However, despite efforts to restrict input, when users copy and paste content, it often includes unwanted tags. To address this issue, ...

javascriptjquerycontenteditable

The enigmatic "margin-30" element within adaptable layout design

Recently, I decided to challenge myself by learning pure CSS and moving away from relying on Bootstrap for my layouts. The only aspect of Bootstrap I really used was the container class, so I created a basic project to experiment with pure CSS. In this pro ...

htmlcssbootstrap-4

Error: Unable to iterate over data.data due to its type

I am attempting to fetch images from the woocommerce API and here is the code I am using: this.config.getWithUrl(this.config.url + '/api/appsettings/get_all_banners/?insecure=cool') .then((data: any) => { this.banners = data.data; consol ...

javascriptangulartypescriptionic-framework

When transmitting information to the server, the browser initiates four requests

I am encountering an issue with my React component. The problem arises when I try to retrieve the current geographic coordinates, as they are being fetched 4 times consecutively. This same glitch occurs when attempting to send the coordinates to the serv ...

javascriptreactjstypescriptfetchnavigator

How can I align a <Image> to the center and another <Image> to the right in React Native?

Struggling to position two images on the Appbar of my React Native application, I need one in the middle and the other on the right. My current approach is not working as intended. Here's how it should look: This is what I have tried so far: <Vie ...

reactjsreact-native

What is the best way to implement webpack (2.x) in elixir phoenix (1.3.x) as a replacement for brunch?

Attempting to switch from brunch to webpack for developing with hot-module-replacement and access to more advanced build tools. However, struggling because most tutorials are outdated, focusing on Phoenix 1.2.x and Webpack 1.x. Appreciate any advice or gu ...

reactjswebpackelixirphoenix-frameworkwebpack-2

Node.js expressing caution about the use of backslashes in console logging statements

While this issue may not be considered crucial, I have observed an unexpected behavior when it comes to logging backslashes to the console. To verify the results, please try the following two examples in your terminal. I experimented with versions 0.10 an ...

javascriptnode.jsbackslash

Issue with executing a server-side function in a Next.js application

I'm encountering an issue with my Next app. I have a method in my ArticleService class that retrieves all articles from my SQL database. async getArticles(): Promise<IArticle[] | ServiceError> { try { const reqArticles = await sql< ...

reactjstypescriptnext.jsreact-hooksserver-side-rendering

Pass additional parameter while calling a function in Vue

Visit Element on GitHub Check out the upload component <el-upload class="avatar-uploader" action="/upload" :show-file-list="false" :on-error="handleUrlError" :on-success="handleUrlSuccess"> <i v-else class="el-icon-plus avatar-uploade ...

javascriptvue.jsvuejs2vue-componentelement-ui

The parent element is not able to apply the CSS text-decoration in jQuery

Is there a way to retrieve a specific CSS property of an element, even if it is inherited from its parent? The standard jQuery method .css() can help with this. Consider the following HTML structure: <div id="container"> some text<br> ...

jquerycsstext-decorations

The issue I'm facing is that the ng-click functionality in Angular JS is not functioning properly when the

Upon loading the page, my JavaScript function creates a tree structure from JSON data and generates a list of anchor tags which look like this: <a ng-click="shareParent(4619)">Some data</a> Despite associating the ng-click directive with the ...

javascripthtmlangularjs

After an error occurs, the Node.js Restify code will be executed

Within a Restify route, I have set up a router handler that calls a custom module for error checking. If the code encounters an error condition, it returns next(err) and displays the error message in the browser. However, the code does not stop executing a ...

javascriptnode.jsexpressrestify

jqueryajax function returns a boolean value upon completion

Recently, I developed a container method to handle an ajax request: function postRating(formData) { $.ajax({ type: "POST", url: '/api/ratings', data: formData }) .done(function () { return true ...

javascriptjqueryajax

Creating multiple layouts in Next.js based on your project's needs is a common practice. Let's explore

I have been working on the following starter project: https://github.com/vercel/nextjs-subscription-payments The default content provided in the above link serves as the home page for my project. Now, I am looking to create an admin and dashboard section ...

reactjsnext.jslayout

What is the best way to transfer a PHP string to JavaScript/JQuery for use in a function?

Within my PHP code, I have the following: $welcome = "Welcome!"; echo '<script type="text/javascript">addName();</script>'; Additionally, in my HTML/script portion: <a id="franBTN"></a> <script type="text/javascript ...

javascriptphphtmljquery

Next.js lacks proper Tree Shaking implementation for MUI

After setting up a react app with next.js, I noticed that the bundle size for the client significantly increased when importing MUI components. Specifically, there was a large module called @mui/base added to the bundle, even though I am only using three M ...

javascriptreactjsnext.jsmaterial-uimodern-ui

When incorporating Request.js and Cheerio.js into Node/Express, an unexpected outcome may occur where an empty

I am currently in the process of creating a basic web scraper using Request.js and Cheerio.js within Express. My main goal at the moment is to extract the titles of various websites. Instead of scraping each website individually, I have compiled them int ...

javascriptnode.jsexpressasynchronouscheerio