打开一个组件改变了App-Mui的整体风格

Question

我正在使用 Mui 和 Material 工具包主题构建项目.. 我正在使用 Material 套件提供的主题，我还使用自定义 css 来修改 Material 套件提供的默认组件的某些功能，但我无法覆盖样式。 . 所以现在我坚持使用 Material 工具包提供的默认主题但最近我在我的应用程序中添加了另一个组件，我注意到每当我打开该组件时，应用程序的整体样式都会发生变化，令我惊讶的是我提供的自定义样式，这些样式以前不起作用.. 我的问题是- 这种行为的原因可能是什么

如有任何帮助，我们将不胜感激

这是我的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

Answer 1

解决方案

原因 ->

总体 css 发生了变化，因为有问题的组件的 mui 组件导入路径与在其余组件中设置的路径不同，app-wide。

解释 -> 以 if ->

为例

在其余组件中，Box 是从“@mui/material/Box 导入的，但在 NotificationsComp 组件中，它是从“@material-ui/core 导入的。因此，当加载此组件时，它引入了更多 css 类覆盖了这些组件的现有 css 类，因此 css.[=11 中的更改=]

因此，在 <NotificationsComp/> 中为 mui 组件设置与应用程序其余部分相同的路径解决了问题。

打开一个组件改变了App-Mui的整体风格

Opening a component changes overall style of the App- Mui

javascript

reactjs

material-ui

解决方案