类名不会覆盖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的{​​{1}}覆盖，而color被.MuiAppBar-root覆盖。

我也尝试使用z-index

classes

并且仍然相同。

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

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