如何使用 sx prop 来改变导航栏的颜色？

Question

我正在尝试在反应中创建一个黑色导航栏。 到目前为止，这是我的代码：

import UploadIcon from "@mui/icons-material/Upload";
import CustomButton from "./CustomButton";
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import {createMuiTheme} from '@material-ui/core/styles'

const Header = () => {
    return (
        <AppBar sx = {{color:'black'}}
            position="sticky">
            <Toolbar variant="dense">
                <CustomButton
                    text='Upload' endIcon={<UploadIcon/>}/>
            </Toolbar>
        </AppBar>

    )
}
export default Header;

到目前为止，我尝试更改应用栏颜色的技术是此处提出的解决方案： https://smartdevpreneur.com/setting-material-ui-appbar-color-and-styling/#Method_1_Styling_AppBar_With_Classes

我在堆栈溢出中看到的所有关于此的先前线程也没有帮助我。 如何更改导航栏的颜色？

Answer 1

样式化工具栏而不是样式化 appbar 工作。 这是我的最终代码

import UploadIcon from "@mui/icons-material/Upload";
import CustomButton from "./CustomButton";
import AppBar from '@mui/material/AppBar';
import Toolbar from '@mui/material/Toolbar';
import {createMuiTheme} from '@material-ui/core/styles'


const Header = () => {
    return (
        <AppBar
            position="sticky">
            <Toolbar
                sx = {{background:'black',}}
                variant="dense">
                    <CustomButton
                        text='Upload'
                        endIcon={<UploadIcon/>}/>
            </Toolbar>
        </AppBar>
    )
}
export default Header;

Answer 2

 <AppBar sx={{bgcolor:"black"}}>