typescript Classname不会覆盖AppBar的根样式

zyfwsgd6 于 2023-04-13 发布在 TypeScript

关注(0)|答案(2)|浏览(115)

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

但还是一样

**编辑：**我使用的是 typescript 。

typescript

来源：https://stackoverflow.com/questions/57743057/classname-doesnt-override-the-root-style-of-appbar

2条答案

按热度按时间

vybvopom1#

看起来你的CSS（“makeStyles-appBar”）是最后一个应用的，而“MuiAppBar-colorPrimary”是默认的，
你的案子有几个解决办法，

1.使用style属性

<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

赞(0）回复(0）举报 2023-04-13

xzlaal3s2#

navBar：{ backgroundColor：${Theme.colors.base1} !important，颜色：${Theme.colors.base2} !important }，
使用！在你的css重要

赞(0）回复(0）举报 2023-04-13