Classname 不会覆盖 AppBar 的根样式

Question

我正在尝试使用 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 }} >

还是一样。

编辑：我正在使用打字稿。

Answer 1

与默认的“MuiAppBar-colorPrimary”相比，您的 CSS("makeStyles-appBar") 似乎是最后应用的，

针对您的情况的几种解决方案，

1。使用样式属性

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

2。在你的 CSS 上使用 !important - 不可取

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