如何在 React 的 Material-ui 中更改步进器的颜色答案

【问题标题】：How do you change the color of a stepper in material-ui in React如何在 React 的 Material-ui 中更改步进器的颜色
【发布时间】：2018-06-16 04:52:16
【问题描述】：

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

默认为蓝色。

我希望它是material-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>

【问题讨论】：

标签： reactjs material-ui

【解决方案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);

【讨论】：

【解决方案2】：

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

确实为我工作

【讨论】：

【解决方案3】：

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

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

【讨论】：

这不起作用，因为将
放入 StepLabel 时出现编译错误。我不是要更改标签，而是要更改步进器。
要更改 StepLabel，您可以在此处找到工作代码：codesandbox.io/s/jn72jooyyw
您使用的是哪个版本的 Material-UI？如果您在 v0 上，则可以使用 getMuiTheme，但在 v1 中已弃用，对于 v1，您可以使用 createMuiTheme，用于覆盖步进器的样式 MuiStepper 用作组件。
我使用了 labelProps 并且有效！但是，它不包括在未完成时显示为灰色以及在完成时呈现复选标记而不是始终使用索引显示数字的功能。这种方法几乎劫持了 Step 渲染功能，而是渲染图标的 div。你知道如何添加描述的功能吗？