更改 MUI 库后 AppBar 背景未更改

Question

最初，当我从

backgroundColor

 导入 AppBar 时，

@material-ui/core

正在工作

但是在更改导入以从

@mui/material

导入它之后，它只是保持浅蓝色，必须是默认颜色或其他颜色，不要。但我不知道为什么更改导入后backgroundColor不再起作用。我更改了库，因为

borderBottom

不适用于第一个导入的 AppBar，但适用于

@mui/material

中的 AppBar。

我知道在我更改为 mui/material 后，这有效：

<AppBar className={headerStyles.appBar} position="sticky" sx={{ backgroundColor: 'black' }}>

但我仍然想知道为什么它不能与我的 makeStyles 中指定的现有样式一起使用。

以下是我安装的版本：

'@material-ui/core": "^4.12.4"

"@mui/material": "^5.15.3"

<AppBar className={headerStyles.appBar} position="sticky">

为什么

headerStyles.appBar

不再起作用了？

const useHeaderStyles = makeStyles((theme) => ({
    appBar: {
        backgroundColor: '#000000',
        boxShadow: theme.shadows[5],
        zIndex: theme.zIndex.drawer + 1,
        borderBottom: '3px solid orange'
    },

Answer 1

您必须检查从哪里导入 makeStyles。根据 mui 的网站，导入已更改：在此处查看。新进口的是

import { makeStyles } from '@mui/styles';