CODEWITHSUNDEEP
reactjsmaterial-ui
Zach G
Zach G

Reputation: 645

How do you change the color of a stepper in material-ui in React

Referring to this: https://material-ui.com/demos/steppers/

It is blue by default.

I want it to be material-ui's orange200

I tried the following code (from this stackoverflow answer) but it did not work.

import getMuiTheme from 'material-ui/styles/getMuiTheme'

const muiTheme = getMuiTheme({
    stepper: {
        iconColor: 'green' // or logic to change color
    }
})

<MuiThemeProvider muiTheme={muiTheme}>
    <Stepper>
        ...
    </Stepper>
</MuiThemeProvider>

Upvotes: 1

Views: 7097

Answers (3)

CosmOrtome
CosmOrtome

Reputation: 174

overrides: {
    MuiStepIcon: {
        root: {
            color: '#000000', // or 'rgba(0, 0, 0, 1)'
            '&$active': {
                color: '#000000',
            },
            '&$completed': {
                color: '#000000',
            },
        },
    }

did work for me

Upvotes: 2

magic_turtle
magic_turtle

Reputation: 1323

Use Chrome DevTools (or other browsers' dev tools) to find out a class that will give you an information about an element to override.

For example, assuming you found that the class name is .MuiStepIcon-root-78. The formulae is Mui[component name]-[style rule name]-[UUID], where Mui is a default prefix and 78 is just an id. So, the element's name is MuiStepIcon and a subsequent attribute is root.

Say, you want to change the color. If you do the hierarchy MuiStepIcon -> root -> color, you will change the default color only. To change any other colors, watch out for pseudo classes. For example, using devtools, if the class is .MuiStepIcon-root-78.MuiStepIcon-active-80, then the pseudo class is active, and your code should be MuiStepIcon -> root -> '&$active' -> color. Look at the code below for references.

Look at the docs for more info https://material-ui.com/customization/overrides/#overriding-with-classes

You can also determine available elements to override by referring to createMuiTheme -> overrides, which will take you to overrides.d.ts file. There is an interface that lists all components names, like MuiStepIcon, though it won't give you other information as devtools do.

import React, { Component } from 'react';
import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';

const muiTheme = createMuiTheme({
    overrides: {
        MuiStepIcon: {
            root: {
                color: '#000000', // or 'rgba(0, 0, 0, 1)'
                '&$active': {
                    color: '#000000',
                },
                '&$completed': {
                    color: '#000000',
                },
            },
        },
    }
});

const otherStyles = theme => ({
    root: {
        // Whatever needed
    },
});

class MyComponent extends Component {
    render(){
        return (
            <MuiThemeProvider theme={muiTheme}> 
            {
                // Your stepper here, should be within MuiThemeProvider
            }
            </MuiThemeProvider>
        );
    }
};

export default withStyles(otherStyles, { withTheme: true })(MyComponent);

Upvotes: 4

Piyush Zalani
Piyush Zalani

Reputation: 3934

One way to change the color and styling of icon of stepper material UI is to pass icon prop in StepLabel as:

<StepLabel 
icon = <div style={{backgroundColor: 'orange', width:'11px', padding: '2px', textAlign: 'center', height: '11px', fontSize: '10px', borderRadius: '50%'}}>{index}</div>
>{label}</StepLabel>

Upvotes: 0

Related Questions