打开组件会改变App的总体风格。

Question

我正在用梅花和材料包的主题来建立一个项目。我正在使用由材料工具包提供的主题，我也使用自定义css来修改材料工具包提供的默认组件的一些特性，但是我不能过度使用这些样式。所以现在我被材料工具包提供的默认主题困住了，但最近我在我的应用程序中添加了另一个组件，我注意到每当我打开该组件时，应用程序的总体样式就会发生变化，令我感到惊讶的是我提供的自定义样式，它们以前不起作用。我的问题是-这种行为的原因可能是什么？

任何帮助都将不胜感激。

这是我的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组件的导入路径与其他组件(应用程序范围)中设置的路径不同。

Explaination ->以->为例

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

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