我正在使用Mui和Material Kit主题来构建一个项目。我正在使用Material Kit提供的主题，我也在使用自定义CSS来修改Material Kit提供的默认组件的一些功能，但我无法覆盖样式。所以现在我坚持使用Material Kit提供的默认主题，但最近我在我的应用程序中添加了另一个组件，我注意到，每当我打开该组件时，应用程序的整体样式都会发生变化，令我惊讶的是，这是我提供的自定义样式，这在以前是不起作用的。
任何帮助都将不胜感激
这是我的App.js

import './App.css';
// @mui material components
import { ThemeProvider } from "@mui/material/styles";
import CssBaseline from "@mui/material/CssBaseline";
// Material Kit 2 React themes
import theme from "assets/theme";
import { BrowserRouter, Route, Routes } from 'react-router-dom';
import HomeSkeleton from 'components/Drawer/Drawer';
import SignInCover from 'components/sign-in/Signin';
import DSAManagement from 'components/DSAManagement/DSAManagement';
import LeadManagement from 'components/LeadManagement/LeadManagement';
import ResponsiveDrawer from 'components/Drawer/ResponsiveDrawer';
import NotificationsComp from 'components/notifications/NotificationsComp';
import Notifications from 'components/common/Notifications/Notifications';

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CssBaseline />
      <BrowserRouter>
        <Routes>
          <Route exact path='/' element={<SignInCover/>} />
          <Route exact path='/res' element={<ResponsiveDrawer/>}></Route>
          <Route exact path='/home' element={<HomeSkeleton/>} >
            <Route exact path='dsa-management' element={<DSAManagement />}/>
            <Route exact path='lead-management' element={<LeadManagement />}/>
            <Route exact path='payout-management' element={<DSAManagement />}/>
            <Route exact path='product-management' element={<DSAManagement />}/>
            <Route exact path='notifications' element={<NotificationsComp />}/>
            <Route exact path='user-notifications' element={<Notifications />} />
          </Route>
        </Routes>
      </BrowserRouter>
    </ThemeProvider>
  );
}

export default App;

字符串
这是令人不安的部分

import React from 'react'
import { TextareaAutosize, Toolbar } from '@material-ui/core'
import { Box } from '@material-ui/core'
import { Icon } from '@material-ui/core'
import { IconButton } from '@material-ui/core'
import { AccessTime, Bookmark } from '@material-ui/icons'
import { Button, Grid } from '@mui/material'
import NotificationTabs from './NotificationTabs'

const NotificationsComp = () => {
    return(
    <>
    <Grid container>
      <Grid item md={12}>
        <Toolbar disableGutters sx={{padding: 0}}>
          <Box sx={{ display: { xs: 'none', md: 'flex' } }}>
          <IconButton size="medium" aria-label="filter" color="inherit">
              <Icon>filterList</Icon>
          </IconButton>
          <Button variant="text" color='black' 
              sx={{
                  display: 'inline-block', 
                  fontSize: '0.8rem', p:0, 
                  mr: '1rem',
                  letterSpacing: 0}}>
                  Filter
              </Button>
          <Button variant="text" color='black' 
              sx={{
                  display: 'inline-block', 
                  fontSize: '0.8rem', p:0, 
                  mr: '1rem',
                  letterSpacing: 0}}>
                  (500 DSA selected)
              </Button>
          </Box>
        </Toolbar>
      </Grid>
      <Grid item md={12}>
        <TextareaAutosize  style={{height: '10rem',width: '100%', padding: '1rem'}} placeholder={'Write Notification Text here'}></TextareaAutosize>
        <Toolbar disableGutters>
          <Box sx={{ display: { xs: 'none', md: 'flex' }, px: 0 }} >
            <IconButton size="medium" aria-label="show 4 new mails" color="inherit">
              <Icon>send</Icon>
            </IconButton>
            <Button variant="text" color='black' 
              sx={{
                display: 'inline-block', 
                fontSize: '0.8rem', p:0, 
                mr: '1rem',
                letterSpacing: 0}}>
                  Send Notification
            </Button>
            <IconButton
            size="medium"
            aria-label="show 17 new notifications"
            color="inherit"
            >
              <AccessTime/>
            </IconButton>
            <Button variant="text" color='black' 
              sx={{
                display: 'inline-block', 
                fontSize: '0.8rem', p:0, 
                mr: '1rem',
                letterSpacing: 0}}>
                  Schedule
            </Button>
            <IconButton
              size="medium"
              aria-label="save notifications"
              color="inherit"
            >
            <Bookmark/>
            </IconButton>
            <Button variant="text" color='black' 
              sx={{
                display: 'inline-block', 
                fontSize: '0.8rem', p:0, 
                mr: '1rem',
                letterSpacing: 0}}>
                  Save
            </Button>
          </Box>
        </Toolbar>
      </Grid>
      <Grid item md={12}>
        <NotificationTabs/>
      </Grid>
    </Grid>
    </>    
    )
}
export default NotificationsComp

型