如何使material-ui中的工具栏透明？

Question

我正在使用material-ui。有两个工具栏，其中第二个工具栏想要透明背景

我关注了这个，Transparent AppBar in material-ui (React)，但它适用于 AppBar 组件，不适用于工具栏

我的代码：

主题：

const MuiTheme = createMuiTheme({
  palette: {
    primary: {
      main: purple[500],
    },
    secondary: {
      main: green[500],
    },
  },
  mixins: {
    toolbar: {
      backgroundColor: "transparent",
    },
  },
});

工具栏文件

const toolbarStyles = makeStyles((theme) => ({
  toolbar: {
    backgroundColor: theme.mixins.toolbar.backgroundColor,
  },
}));


 <AppBar position="static" style={{ boxShadow: "none" }}>
            <Toolbar className="toptoolBar">
              {/* */}
            </Toolbar>
            <div style={{ backgroundColor: "transparent" }}>
              <Toolbar
                style={{ backgroundColor: "transparent" }}
                classes={{ root: toolbarSt.toolbar }}
              >
                {/* */}
              </Toolbar>
            </div>
          </AppBar>

Answer 1

如果您只想进行一定数量的工具栏样式更改，则不建议在主题文件中进行。相反，使用makeStyles

export default function App() {
    const classes = useStyles();
    return (
        <AppBar position="static" style={{ boxShadow: "none" }}>
            <Toolbar classes={{root:classes.greenToolbar}} className="toptoolBar" >
                Green
            </Toolbar>
            <div style={{ backgroundColor: "transparent" }}>
                <Toolbar
                    classes={{ root: classes.transparentToolbar }}>
                    transparent
                </Toolbar>
            </div>
        </AppBar>
    );
}

const useStyles = makeStyles((theme) => ({
    transparentToolbar: {
        backgroundColor: "transparent",
        color: "red"
    },
    greenToolbar:{
        backgroundColor:'green'
    }
}));

这是工作演示：