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

Question

指的是这个： https://material-ui.com/demos/steppers/

默认情况下它是蓝色的。

我希望它是材料 ui 的橙色200

我尝试了以下代码(来自此堆栈溢出答案(，但它不起作用。

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

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

确实为我工作

Answer 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>