Tips for personalizing the color scheme of Material UI Stepper Step?

I need help customizing the disabled Step color for Material UI Steppers. The default colors are Blue for enabled steps and Grey for disabled steps, but I want to change it to a different color as shown in this example: https://i.stack.imgur.com/HGGxp.png

Unfortunately, I can't seem to find a way to access the Icon section of the StepLabel. I've tried applying CSS to the IconContainer, but the specificity is not strong enough.

If you can help, please check out my code here: https://codesandbox.io/s/0102v4z1op

Thanks in advance!

javascriptcssreactjsmaterial-ui

Answer №1

<Stepper
      activeStep={currentStep}
      orientation="vertical"
      connector={false}
    >
      {steps.map((label, index) => {
        return (
          <Step key={label} className={classes.step} classes={{ completed: classes.completed }}>
            <StepButton icon={<DeleteIcon className={classes.xiconRoot}/>} completed={index === 2}>
              <StepLabel
                classes={{
                  iconContainer: classes.iconContainer
                }}
              >
                {label}
              </StepLabel>
            </StepButton>
          </Step>
        );
      })}
</Stepper>

In a similar fashion to how the completed class is utilized for the Step component, you have the option to customize various states by using the provided API. Check out https://material-ui.com/api/step/#css-api for more details.

For a complete code snippet example, visit this link: https://codesandbox.io/s/vn8m2rqol3

Answer №2

This is how I approached it:

        <StepLabel
          classes={{
            alternativeLabel: classes.alternativeLabel,
            labelContainer: classes.labelContainer
          }}
          StepIconProps={{
            classes: {
              root: classes.step,
              completed: classes.completed,
              active: classes.active,
              disabled: classes.disabled
            }
          }}
        >
          {this.state.labels[label - 1]}
        </StepLabel>

Following that, I defined the classes like this:

  step: {
    "&$completed": {
      color: "lightgreen"
    },
    "&$active": {
      color: "pink"
    },
    "&$disabled: {
      color: "red"
    },
  },
  alternativeLabel: {},
  active: {}, //necessary for the &$active tag to function correctly
  completed: {},
  disabled: {},
  labelContainer: {
    "&$alternativeLabel": {
      marginTop: 0
    },
  },

Answer №3

Create a personalized Icon for the Stepper using this method.

import { Step, StepLabel, Stepper } from "@mui/material";
import { Check } from "@mui/icons-material";

const CustomIcon = ({ active, completed, icon, }) => {
  const contents = completed ? <Check fontSize="inherit" /> : icon;
  return (
    <div style={{
        backgroundColor: active || completed ? "blue" : "gray",
        color: "white",
        minHeight: "35px",
        minWidth: "35px",
        borderRadius: "50%",
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        padding: "5px",
        fontSize: "1rem",
      }}>
      {contents}
    </div>
  );
};

// Take note of the StepIconComponent below.  
// It receives the props as indicated above.

export const MyStepper = ({steps, currentStep}) => {
  return (
    <Stepper activeStep={currentStep}>
      {steps.map((step) => (
        <Step key={step.name}>
          <StepLabel StepIconComponent={CustomIcon}>
            {step.name}
          </StepLabel>
        </Step>
      ))}
    </Stepper>
  );
};

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

Unable to bind to property as it is not recognized as a valid attribute of the selector component

I have a situation where I need to pass a variable from one component to another using @input. Here is my parent component : @Component({ selector: 'aze', templateUrl: './aze.component.html', styleUrls: [('./aze.compo ...

javascriptangulartypescriptangular8

When it comes to passing prop values through functions, TypeScript types do not provide suggestions

I'm struggling to find a way to ensure that developers have suggested types for specific props in my component, regardless of how they pass data to the prop. For example, when I directly pass an array of values to the prop: <Component someProp={[{ ...

reactjstypescript

Error: Client encountered an issue where the data input on field number 9, CommentCreateInput.n, does not match the required type String! Also, on field number 10, the input for "name" is

Currently, I am working on a blog website using React, Next.js, GraphCMS, and TailwindCSS. One particular issue I am encountering is related to the API responsible for transmitting comments from the website to the CMS. Below is the code snippet for my com ...

reactjsnext.jstailwind-css

Selecting specific elements based on their position within a parent element using

I can't seem to figure out the strange behavior of the nth-child selector. After calling the function BackColor1(), my visual appears different than expected: Something seems off. However, when I call BackColor2(), everything looks normal again. Co ...

jquerycss

The show-word-limit feature is malfunctioning on the element.eleme.io platform

After attempting to utilize the show-word-limit attribute of the input element, unfortunately the character count did not display. Below is the code snippet that was used: <el-input type="textarea" placeholder="Please input" ...

javascripthtmlvue.jsinputelement

Different ways to maintain the original syntax highlighting colors in JavaScript console

Upon closer inspection near the green arrows, you can see that the default console.log function colorizes values based on their type, distinguishing between string and number. In contrast, highlighted near the red arrows is my attempt at using Winston to ...

javascripttypescriptloggingconsole.logwinston

The file_get_contents() function encountered an issue as the content type was not specified, leading to it assuming

I am currently working on a project using PHP and JavaScript. I need to call an API from the camera using PHP code. I am using the file_get_contents function and Post request for this purpose. Below is the code snippet: $value = $_POST['TakeNewPic&ap ...

javascriptphpajaxrequest

Using PHP to read an image blob file from an SVG

Currently, I am utilizing the Raphael JS library on the client-side to generate a chart in SVG format. However, my goal is to make this chart downloadable, which poses a challenge since SVG does not natively support this feature. Initially, I attempted to ...

javascriptphpsvgraphaelimagick

Is there a way to automatically close the previous accordion when scrolling to a new one on the page?

Currently, I am working with the material-ui accordion component and facing an issue where all accordions are initially opened. As I scroll down the page and reach a new accordion, I want the previous ones to automatically close. The problem arises when tr ...

reactjstypescriptmaterial-uiaccordion

Improving Performance in AngularJS Through Efficient Scope Passing Between Controllers

I am facing a situation in my AngularJS project where I have two controllers - controller 1 is constantly present in the view, while controller 2's visibility can change based on the view. In order to ensure that controller 1 has access to certain sco ...

javascriptangularjsprofiling

Unable to locate any Material widgets

In my latest project, I decided to implement a listview that utilizes the gero widget. Despite wrapping all hero widgets and listview widgets in material, an error keeps popping up. While clicking on the listtile leads me to the desired result, navigating ...

flutterlistviewmaterial-uihero

Scan for every header tag present and verify the existence of an id attribute within each tag. If the id attribute is absent, insert

Looking to locate all header tags within the content and verify if each tag has an id attribute. If not, then jQuery should be used to add the id attribute. Here is the code snippet: var headings = $("#edited_content").find("h1,h2,h3,h4,h5,h6"); $.each( ...

javascriptjquery

Creating a chart with multiple series in canvas js through looping

I'm currently working on creating a multi-series chart using Canvasjs. I've encountered an issue where I can't include a loop inside the dataPoints and have had to manually code everything. Is there a way to utilize for loops in this scenari ...

javascriptjqueryjsonajaxcharts

deleting hyperlink on mobile device

I'm trying to hide a specific div when the screen size is mobile, and currently I have: HTML <div id='top-btn'> <a class="fade-in" href="...">Top</a> </div> CSS #top-btn a { visibility: visible; opacity: 1 ...

htmlcss

Ways to ensure a for loop waits until an Async call is successful before proceeding

Hey there! Currently, I am working on creating a batch update for my local store using a for loop and asynchronous Ajax calls. However, I'm facing an issue where the loop continues running even before the Ajax call has successfully completed. Is ther ...

javascriptajaxsencha-touch

Discover the secret sauce to effortlessly adding text upon hovering over a button

I am completely new to CSS and only know the basics. Recently, I stumbled upon this code online that creates a button. However, I want to use an image inside the button, add a color overlay when hovered, and display text saying "LEARN MORE" upon hovering ...

css

Is it possible to create a webpage where the header and footer remain static, while the content in the body can be dynamically changed

I am in the process of creating a webpage where main.html will load a page with a static header and footer that remains unchanged when navigation links are clicked. I'd like to achieve this using Javascript, with the body content being sourced from an ...

javascripthtmlcss

The Art of HTML and CSS Layouts

My code is displaying a layout where the 'Login or Signup' link is not aligning to the right side of the page as intended. Can anyone help me with this issue? HTML <header> <h1>Heading</h1> <p>A clean, minimal, gri ...

htmlcss

Using JavaScript to dynamically calculate the sum of selected column values in Angular Datatables

I have a table set up where, if a checkbox is checked, the amounts are automatically summed and displayed at the top. However, I am encountering issues with the code below as it is not providing the exact sum values. Can anyone suggest a solution to this p ...

javascriptjqueryangulardatatablesangular-datatables

warning: issue detected with the password value in jquery

Why is the following script generating an incorrect JavaScript alert message? <script type="text/javascript> $('#cpassword').change(function() { var pass=$('#password').val(); alert(pass); var cpass=$(& ...

javascriptjquery