Question

参考： https://material-ui.com/demos/steppers/

默认为蓝色。

我希望它是材料 - ui的orange200

我尝试了以下代码（来自this stackoverflow answer），但它没有用。

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

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

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

Answer 1

使用Chrome DevTools（或其他浏览器的开发工具）查找一个类，该类将为您提供有关要覆盖的元素的信息。

例如，假设您发现类名是 .MuiStepIcon-root-78。公式为Mui[component name]-[style rule name]-[UUID]，其中Mui是默认前缀，而78只是ID。因此，元素的名称为MuiStepIcon，后续属性为root。

说，您想更改颜色。如果执行层次结构MuiStepIcon -> root -> color，则将仅更改默认颜色。要更改其他任何颜色，请注意pseudo classes。例如，使用devtools，如果类为.MuiStepIcon-root-78.MuiStepIcon-active-80，则伪类为active，您的代码应为MuiStepIcon -> root -> '&$active' -> color。查看下面的代码以供参考。

查看文档以获取更多信息https://material-ui.com/customization/overrides/#overriding-with-classes

您还可以通过参考createMuiTheme -> overrides确定要覆盖的可用元素，这会将您带到overrides.d.ts文件。有一个列出所有组件名称的界面，例如MuiStepIcon，尽管它不会像devtools一样为您提供其他信息。

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);

Answer 2

更改步进材质UI图标的颜色和样式的一种方法是将StepLabel中的图标道具传递为：

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

Answer 3

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

为我工作

如何在React中更改材料-ui中步进器的颜色

3 个答案: