这个答案使@Nadun 的答案变得完整——他值得称赞。要覆盖材质 ui 类，我们需要了解以下内容：

1. 在顶部的 const 变量中添加您的样式

    const styles = {
      root: {
        backgroundColor: 'transparent !important',
        boxShadow: 'none',
        paddingTop: '25px',
        color: '#FFFFFF'
      }
    };

2.我们需要使用带有“withStyles”的高阶函数来覆盖材质ui类

    export default withStyles(styles)(NavigationBar);

3.现在这些样式可以作为渲染函数中的props使用，尝试这样做 - console.log(this.props.classes)- 你会得到一个类名，对应于你包含在样式对象中的属性，比如 - {root: "Instructions-root-101"}。

添加类属性

render() {
   const { classes } = this.props;
   return ( 
       <AppBar classes={{ root: classes.root }}>
        // Add other code here
       </AppBar>
   )
}

import React, { Component } from 'react';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
import logo from '../Assets/logo.svg';
import { withStyles } from '@material-ui/core/styles';

const styles = {
  transparentBar: {
    backgroundColor: 'transparent !important',
    boxShadow: 'none',
    paddingTop: '25px',
    color: '#FFFFFF'
  }
};

class NavigationBar extends Component {
  render() {
    return (
      <AppBar className={classes.transparentBar}>
        <Toolbar>
          <img src={logo} style={{ height: '28px' }} />
        </Toolbar>
      </AppBar>
    );
  }
}

export default withStyles(styles)(NavigationBar);

找到重要的部分：

backgroundColor: 'transparent !important'

有关更多详细信息，请参阅本指南：https : //material-ui.com/customization/overrides/

希望能帮到你

添加到上面的答案中，如果您想为某些内部自动生成的元素添加样式，则可以使用此语法执行此操作

<TextField className={classes.txtField}

然后在类对象中，我们可以通过这种方式来处理存在于 TextField 中的标签

const useStyles = makeStyles((theme) => ({
    txtField: {
        "& label": {
             padding: 23
        }
    }
});