Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How to use custom color for step label string

See original GitHub issue

Duplicates

I have searched the existing issues

Latest version

I have tested the latest version

Current behavior 😯

I wanna use Stepper in a black background. Accordingly, need to change the step label string from the primary color (grey) to a light one (white). I applied a custom style to StepLabel as below:

const ColorlibStepLabel = styled(StepLabel)(() => ({
  [`&.${stepLabelClasses.active}`]: {
    [`& .${stepLabelClasses.label}`]: {
      color: '#fff',
    },
  },
  [`&.${stepLabelClasses.completed}`]: {
    [`& .${stepLabelClasses.label}`]: {
      color: '#fff',
    },
  },
  [`& .${stepLabelClasses.label}`]: {
    color: 'rgb(255, 255, 255, 0.3)',
  },
}));

After this, I was able to get white color for disabled state but not for completed and active state.

I’d like to know the correct way how to change the color for completed and active step label string.

Issue Analytics

State:
Created 2 years ago
Comments:5 (1 by maintainers)

Top GitHub Comments

4reactions

amanzrx4commented, Feb 3, 2022

hey @euj1n0ng, i think this will work:

 [`& .${stepLabelClasses.label}`]: {
    [`&.${stepLabelClasses.completed}`]: {
      color: "rgb(255, 255, 255, 0.3)"
    },
    [`&.${stepLabelClasses.active}`]: {
      color: "rgb(255, 255, 255, 0.9)"
    },

    color: "rgb(255, 0, 64)	"
  }

working here: https://codesandbox.io/s/busy-mccarthy-x403u?file=/src/Demo.tsx:1494-1740

1reaction

euj1n0ngcommented, Feb 3, 2022

@amanzrx4 , yes, it works like a charm! Thank you so much. 😍

Top Results From Across the Web

How to use custom color for step label string #30887 - GitHub

I wanna use Stepper in a black background. Accordingly, need to change the step label string from the primary color (grey) to a...

How to use custom color for step label string in Material UI

I wanna use Stepper in a black background. Accordingly, need to change the step label string from the primary color (grey) to a...

How to use custom color for step label string in Material UI ...

[Solved]-How to use custom color for step label string in Material UI-Reactjs. Search. score:0. const ColorlibStepLabel = styled(StepLabel)(() => ({ [`& .

StepLabel API - Material UI - MUI

API reference docs for the React StepLabel component. Learn about the props, CSS, and other APIs of this exported module.

Stepper - Angular Material

Use this to notify components if the labels have changed after initialization. completedLabel: string ... Theme color for all of the steps in...