如何不使用styled组件等样式API通过theme配置MUI AppBar样式

完全可以仅通过theme全局配置AppBar的样式，不需要额外使用styled组件或其他样式API。MUI主题系统原生支持全局覆盖组件默认样式，你可以通过components字段配置AppBar的全局规则。

具体配置方法 #

修改你的palette.js文件，在createTheme配置中新增components字段即可，示例如下：

import { createTheme } from '@mui/material/styles';
const theme = createTheme({
    palette: {
        primary: {
            main: "#000F04"
        }
    },
    // 组件全局样式配置
    components: {
        // AppBar对应的组件命名空间
        MuiAppBar: {
            styleOverrides: {
                // 根元素样式，所有AppBar实例默认继承
                root: {
                    // 可自定义任意样式，示例如下
                    minHeight: '68px',
                    boxShadow: '0 2px 8px rgba(0,0,0,0.1)',
                },
                // 也可针对特定属性的AppBar单独配置，比如color为primary时的样式
                colorPrimary: {
                    color: '#f0f0f0'
                },
                // 针对position为fixed的AppBar单独配置
                positionFixed: {
                    backdropFilter: 'blur(8px)'
                }
            }
        },
        // 如需配套修改Toolbar默认样式也可同步配置
        MuiToolbar: {
            styleOverrides: {
                root: {
                    minHeight: '68px',
                    paddingInline: '20px'
                }
            }
        }
    }
});

export default theme;

配置完成后你原有的App.js代码无需任何改动，项目中所有引用AppBar的地方都会自动应用你在主题中定义的样式规则。

内容的提问来源于stack exchange，提问作者immasaru