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

【问题标题】：Opening a component changes overall style of the App- Mui打开一个组件会改变 App-Mui 的整体风格
【发布时间】：2022-08-21 14:34:16
【问题描述】：

我正在使用 Mui 和 Material kit 主题来构建一个项目.. 我正在使用 Material kit 提供的主题，并且我还使用自定义 css 来修改 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

你能用codesandbox.io 之类的东西创建一个最小的工作原型吗？

标签： javascript reactjs material-ui

【解决方案1】：

解决方案

原因->

整体 css 正在发生变化，因为有问题的组件对于 mui 组件的导入路径与在应用程序范围内的其余组件中设置的路径不同。

解释->以如果->为例

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

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

【讨论】：

【解决方案2】：

谢谢，这正是我面临的问题

【讨论】：