typescript - 类名不会覆盖AppBar的根样式

我试图使用className更改AppBar组件的样式，但始终遵循.MuiAppBar-root的操作。

const useBoardStyles = makeStyles((theme: Theme) => ({
  appBar: {
    backgroundColor: 'red',
    color: 'black',
    zIndex: theme.zIndex.drawer + 1
  },

const classes = useBoardStyles();

...
<AppBar position='fixed' className={classes.appBar} >

这里显示.makeStyles-appBar-139被.MuiAppBar-colorPrimary覆盖background-color对于color和.MuiAppBar-root和z-index被classes覆盖。
我还尝试使用

<AppBar position='fixed' classes={{ root: styles.appBar }} >

还是一样。
编辑：我在用打字机。

最佳答案

看起来你的CSS（“MakStultAppBar”）最后被应用于默认的“MuiAppBar CelrPrime'”，
你的案子有几个解决方案，
一。使用样式属性

<AppBar position="fixed"  style={{ color: 'black', z-index: 1201, background-color: 'red'}}>

2.使用！重要的是你的CSS -不可取

appBar: {
    backgroundColor: 'red !important',
    color: 'black !important',
    zIndex: (theme.zIndex.drawer + 1) + ' !important'
}

参考-
Transparent AppBar in material-ui (React)
https://material-ui.com/api/app-bar/
typescript-带有装饰符，如下所示，

import * as React from 'react';
import { withStyles, WithStyles } from 'material-ui/styles';
import { StyledComponent } from 'material-ui';

type C = 'root' | 'foo';

interface P { options?: string[]; }

interface S { open: boolean; }

@withStyles((theme) => ({
  root: {},
  foo: {},
}))
class Component extends React.Component<P & WithStyles<C>, S> {
  render() {
    return (
      <div className={this.props.classes.root} />
    );
  }
}

export default Component as StyledComponent<P, C>; // type assertion

没有装饰工

const SelectedMenu = withStyles(theme => ({
  root: {
    maxWidth: 360,
    width: '100%',
    backgroundColor: theme.palette.background.paper,
  },
}))<P>(class extends React.Component<P & WithStyles<C>, S> {

来源-https://github.com/mui-org/material-ui/issues/8598