Открытие компонента меняет общий стиль App-Mui

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