MUI Step Indicator Icon is not visible

I'm having trouble getting the MUI Stepper Component to display Icons within each step node. Despite following the sample code provided by MUI, my implementation only shows a blank screen instead of the desired look.

The desired appearance includes icons inside each step, as illustrated in the documentation snapshot below:

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

const CustomStepIconRoot = styled('div')(({ theme, ownerState }) => ({
  zIndex: 1,
  color: '#fff',
  width: 50,
  height: 50,
  display: 'flex',
  borderRadius: '50%',
  justifyContent: 'center',
  alignItems: 'center',
  ...(ownerState.active && {
    backgroundImage:
      'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
    boxShadow: '0 4px 10px 0 rgba(0,0,0,.25)',
  }),
  ...(ownerState.completed && {
    backgroundImage:
      'linear-gradient( 136deg, rgb(242,113,33) 0%, rgb(233,64,87) 50%, rgb(138,35,135) 100%)',
  }),
}));

function CustomStepIcon(props) {
  const { active, completed, className } = props;

  const icons = {
    1: <Icon>star</Icon>,
    2: <Icon>star</Icon>,
    3: <Icon>star</Icon>,
  };

  
  return (
    <CustomStepIconRoot ownerState={{ completed, active }} className={className}>
      {icons[String(props.icon)]}
    </CustomStepIconRoot>
  );
}


<Stepper alternativeLabel activeStep={2} style={{ background: 'none' }}>
        {steps.map(label => (
          <Step key={label}>
            <StepLabel StepIconComponent={CustomStepIcon}>{label}</StepLabel>
          </Step>
        ))}
      </Stepper>

Answer №1

The issue lies in the lack of background color setting for the ColorlibStepIconRoot when the step icon is inactive or completed. This results in a transparent background color with white icon color, making it difficult to see on a white background:

const ColorlibStepIconRoot = styled('div')(({ theme, ownerState }) => ({
  backgroundColor:
    theme.palette.mode === 'dark' ? theme.palette.grey[700] : '#ccc',
  ...

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

Socket.io: sending signals without receiving any responses

I've been working on a real-time socket.io project that involves a collaborative whiteboard app. I'm facing some issues with emitting data. server.js const express = require('express') const app = express(); const http = require(&apos ...

What's the trick to ensuring that state is set with useEffect() every time the page is refreshed?

Hey there! I've got some code that's pretty straightforward and not too complicated, so please take a moment to read through it. (I'm using React with Next.js) First off, in the root file app.js, there's a useEffect function that fetch ...

24-hour countdown tool featuring a visual progress bar

Currently, I am in the process of developing an application aimed at assisting individuals in either forming new habits or breaking old ones. In this application, I am looking to implement a countdown timer that ticks down daily; with the help of this help ...

Creating a secure authentication system with Parse for password recovery and website logins

Our organization has chosen to utilize a Parse backend for managing user accounts, and I am tasked with creating web pages for functionalities like password reset that will seamlessly integrate with our mobile applications. It has been some time since I ha ...

Can someone explain the significance of receiving a TypeError when trying to access properties of null (specifically 'useRef') in a React application?

I encountered an issue while working on a React project...the browser console displays the following error. What does this mean? And how can I resolve it? react.development.js:1545 Uncaught TypeError: Cannot read properties of null (reading 'useRef ...

Crafting an integrated REST API model with interconnected data

This question revolves around the implementation of a specific scenario rather than a problem I am facing. Let's say we have a User and a Resource, where a User can have multiple Resource but a Resource can have only 1 User. How should API endpoints b ...

Phonegap app developer encounters issue with sending ajax requests

Recently, I encountered an issue with Ajax in my Phonegap development. Previously, it worked perfectly but now when I call the Ajax function, nothing happens. Here are the steps I have taken to troubleshoot: 1) I edited the config.xml file and added the f ...

Styling multiple Higher Order Components (HoCs) using Material UI withStyles

When developing my application, I encountered an issue with using Higher Order Components (HoCs) and withStyles for styling. If I apply multiple HoCs to one component, the classes prop of the first HoC gets passed to the next one in the compose chain, caus ...

What happens with JQuery if the JQuery IIFE does not get executed properly?

The jquery-3.3.1.js file contains the following code: ( function( global, factory ) { ... } ); Within this Immediately-Invoked Function Expression (IIFE), there is a line allowing for the use of the JQuery and $ variables to call the JQuery function: wi ...

Exploring NextJS with Typescript

Struggling to incorporate Typescript with NextJS has been a challenge, especially when it comes to destructured parameters in getInitialProps and defining the type of page functions. Take for example my _app.tsx: import { ThemeProvider } from 'styled ...

"Terminate the current window that is open within the handler for the XMLHttpRequest

Currently, my approach involves using Javascript and Ajax to retrieve data and display it in a new window. I am encountering an issue where I am trying to close the window in the OpenFileWindow() function before opening a new one, but I am facing a permiss ...

The navigation bar and text subtly shift when displayed on various devices or when the window size is adjusted

Hello, I am brand new to web development and have encountered an issue on my website. Whenever the window is resized or viewed on a different screen, the navigation bar (which consists of rectangles and triangles) and text elements start moving around and ...

The Netlify build encountered an error: Command resulted in exit code 1 - To learn more about this issue, visit https://ntl.fyi/exit-code-1

Trying to deploy my portfolio on Netlify for the first time has been a learning experience. After researching and attempting to add "CI = npm run build" to build settings as recommended in various articles, I encountered an error that prevented successful ...

Enhancing RTK Query: Efficiently Filtering Query Results in Separate Components

I am currently working on a Todo application using Nextjs 13 with various tools such as app directory, prisma, redux toolkit, shadcnui, and clerk. Within my app, I have implemented two key components - TodoList and Filter. The TodoList component is respons ...

Arrange the two buttons in a vertical position

Excuse any weak code you may come across, as I am a backend developer. This is the current appearance of my form: The alignment of these two buttons in Chrome is not correct The issue only occurs in Chrome, with FireFox and Edge displaying the form as e ...

Continuously animate a series of CSS properties

Here's the code snippet I'm working with: @keyframes ball1 { 0% { transform: translateX(0px); opacity: 0%; } 50% { opacity: 100%; } 100% { transform: translateX(120px); opacity: 0%; } } @keyframes ball2 { 0 ...

Modify the pseudo element when a different class is active

I've encountered an issue while attempting to modify the after pseudo element when the .active class is applied. Despite my efforts, it doesn't seem to be functioning as intended. My current project setup involves using scss with Vue. I have tri ...

Properly defining a DI service in Angular 2.1.2 using ES5

I have created an Angular 2 service that utilizes the Http service and is accessed by other components. However, I am unsure if my implementation is correct: (function (app) { 'use strict'; app.LoaderService = ng.core.Component({ providers: ...

Help! My HTML/CSS (Bootstrap) text won't center properly. Can anyone assist me?

My text doesn't seem to be centered on the page, despite using the "text-center" class for the caption text. What am I missing here? <div class="text-center"> <h1>Evelyn Lauder </h1> <h5 class="font-italic"> 1936-2011</ ...

Sharing a photo and showcasing it on a webpage (Node.js, React.js, Express.js)

I am facing an issue with uploading and displaying an image on a website along with its filename caption. Despite researching various tutorials on the same topic, I believe my confusion lies in understanding how to request information from a server and dis ...