StepLabel styles doesn't overrides

[popuguytheparrot]

I need to redefine styles for the active, disabled, competed state, but styles are not redefined through classes, only through a theme. Change the color of the text using the theme does not suit me

I use useStyles for create css class and use it so

<StepLabel
    classes={{
     label: classes.stepLabel,
     active: classes.stepLabel,
     disabled: classes.stepLabel
}}>

• [V] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

Must change styles

Current Behavior 😯

Styles doesn't overrides

Your Environment 🌎

Tech	Version
Material-UI	v4.0.1
React	latest
Browser	chrome 74

[popuguytheparrot]

pls improve docs about stepper. About Icon, Connector

[eps1lon]

You console should have warnings describing how to fix this issue. If not please provide a minimal reproducible example. This codesandbox.io template may be a good starting point. Thank you!

[popuguytheparrot]

@eps1lon https://codesandbox.io/s/createreactapp-tfejb

[natergj]

I believe I am seeing the same issue with the ExpansionPanel component. Everything was working as I would have expected with the early alpha versions, but I tracked the issue I was seeing as starting with version 4.0.0-alpha.8

[oliviertassinari]

@popuguytheparrot You need to increase the specificity. I have put into parenthesis the specificity. Your style has a specificity of 1 when the core component has a specificity of 2. It can't work.

Here is a simple workaround:

import { styled } from "@material-ui/styles";

const StyledStepLabel = styled(StepLabel)({
  "& .MuiStepLabel-active": {
    color: "#1488CC"
  }
});

https://codesandbox.io/s/createreactapp-belox

[popuguytheparrot]

@oliviertassinari Can i do it without styled ?

[oliviertassinari]

Yes

[popuguytheparrot]

@oliviertassinari To find out which class to override, I need to open the source code of the components?

[oliviertassinari]

No, only the browser dev tools.

[oliviertassinari]

Does https://material-ui.com/customization/components/ help?

[popuguytheparrot]

@oliviertassinari OK But, how to change color for disabled if MuiStepLabel-disabled there is no

[oliviertassinari]

@popuguytheparrot Exactly like you would change the color of the active state. Following the same global CSS approach:

const StyledStepLabel = styled(StepLabel)({
  "& .MuiStepLabel-active": {
    color: "#1488CC"
  },
  "&.Mui-disabled .MuiStepLabel-label": {
    color: "#ccc"
  }
});

[popuguytheparrot]

@oliviertassinari https://codesandbox.io/s/createreactapp-4179o I have a bug with your code :D active haven't color black

[oliviertassinari]

@popuguytheparrot All the steps are disabled.

[popuguytheparrot]

@oliviertassinari Oops

[k1941996]

Can we override it using CreateMuiTheme ?? https://codesandbox.io/s/material-demo-forked-h741r?file=/demo.js

i tried it using this, though i had to use '!important' to override. Is there any other method to do it. other than makestyles and withStyles?

[cjduncana]

I'm still having this problem. I can't override the active style because of specificity. The same reason that @oliviertassinari provided above. I tried his solution, but I get an error in the console.

const useStyles = makeStyles((theme) => ({
  '& .MuiStepLabel-active': { fontWeight: theme.typography.fontWeightBold },
}))

Material-UI: The key `& .MuiStepLabel-active` provided to the classes prop is not implemented in ForwardRef(StepLabel).
You can only override one of the following: root,horizontal,vertical,label,active,completed,error,disabled,iconContainer,alternativeLabel,labelContainer.

I originally used the following, but it does not affect the styles. At least there's no error.

const useStyles = makeStyles((theme) => ({
  active: { fontWeight: theme.typography.fontWeightBold },
}))

.MuiStepLabel-label.MuiStepLabel-completed {
    color: rgba(0, 0, 0, 0.87);
    font-weight: 500;
}
.MuiStepLabel-label.MuiStepLabel-active {
    color: rgba(0, 0, 0, 0.87);
    font-weight: 500;
}
.makeStyles-active-1 {
    font-weight: 700;
}
.MuiStepLabel-label {
    color: rgba(0, 0, 0, 0.54);
}

[oliviertassinari]

@cjduncana

const useStyles = makeStyles((theme) => ({
  root: {
    '& .MuiStepLabel-active': { fontWeight: theme.typography.fontWeightBold },
   },
}))

[cjduncana]

Thank you very much, @oliviertassinari!!!

Question for the repo: Can we improve this dev UX?

[oliviertassinari]

@cjduncana It's fixed in v5, we are removing withStyles and makeStyles.

[k1941996]

please update the documentation also if the makeStyles and witStyles are being removed.

[oliviertassinari]

@k1941996 we will deprecate them in v5 and remov them in v6.

[wsdt]

Issue still there for 5.6.1

[JalalHamed]

for ^5.9.1

const CustomStepLabel = styled(StepLabel)(() => ({
  [`& .${stepLabelClasses.label}`]: {
    fontSize: `16px`,
    [`&.${stepLabelClasses.completed}`]: {
      color: `#8E8E93`,
    },
    [`&.${stepLabelClasses.active}`]: {
      color: `#FDFEFE`,
    },
  },
}));

<CustomStepLabel>{label}</CustomStepLabel>