Material UI 对话框在打开时更改其他组件的样式

Question

我有这个对话框组件，我通过我的 AppBar 组件上的按钮显示。 每当我打开该对话框时，导航栏元素的边距都会发生变化，我不知道为什么。使用开发工具检查 html 后，没有任何变化，我的组件上的任何一个元素都没有 css 更改。

任何有关如何正确调试或在 MUI 文档中查看的建议都会有所帮助。

编辑：.MuiTouchRipple-root 类已附加到我的 AddCircle 组件。

import React from 'react';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import Box from '@mui/material/Box';
import {
  BrowserRouter as Router,
  Switch,
  Route
} from "react-router-dom";
import { useState } from 'react';
import SelectInvoiceDialog from './components/SelectInvoiceDialog';
import ProcessInvoice from './pages/ProcessInvoice';

function App() {
  const [open, setOpen] = useState(false);
  const openSelectDialog = () => setOpen(true);
  const closeSelectDialog = () => setOpen(false);

  return (
  <Router>
    <Box>
      <Navbar openDialog={openSelectDialog}/>
      <Switch>
        <Route exact path="/process">
          <ProcessInvoice />
        </Route>
        <Route exact path="/">
          <Home />
        </Route>
      </Switch>
    </Box>
    <SelectInvoiceDialog open={open} closeAction={closeSelectDialog}/>
  </Router>
  );
}

export default App;

import React from "react";
import AppBar from '@mui/material/AppBar';
import Box from '@mui/material/Box';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import AddCircle from '@material-ui/icons/AddCircle'
import IconButton from '@mui/material/IconButton';
import MenuIcon from '@material-ui/icons/Menu';
import { makeStyles, createStyles } from "@material-ui/core";

const useStyles = makeStyles((theme) => createStyles({
    navBarStyle: {
        background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
        display: 'flex',
        flexDirection: 'row',
        color: 'white'
    }
}));

export default function Navbar ({ openDialog }) {
    const classes = useStyles();
    return (
        <Box>
            <AppBar position="static">
                <Toolbar className={classes.navBarStyle}>
                    <IconButton
                        size="large"
                        edge="start"
                        color="inherit"
                        aria-label="menu"
                    >
                        <MenuIcon />
                    </IconButton>
                    <Typography variant="h6" component="div" sx={{ flexGrow: 1 }}>Invoice processor</Typography>
                    <IconButton
                        size="large"
                        color="inherit"
                        onClick={openDialog}
                    >
                        <AddCircle />
                    </IconButton>
                </Toolbar>
            </AppBar>
        </Box>
    );
}

import Button from '@material-ui/core/Button';
import Dialog from '@material-ui/core/Dialog';
import DialogActions from '@material-ui/core/DialogActions';
import DialogContent from '@material-ui/core/DialogContent';
import { DialogTitle, Select, MenuItem, FormControl, InputLabel, Box, TextField, Typography} from "@mui/material";
import { Link } from 'react-router-dom'
import { useState } from 'react';

export default function SelectInvoiceDialog ({ open, closeAction }) {
    const [filePath, setFilePath] = useState('');
    const [selection, setSelection] = useState('');

    const handleChange = (e) => setSelection(e.target.value)

    return (
            <Dialog 
                open={open} 
                onClose={closeAction}
                fullWidth
                disableEnforceFocus
                >
                <DialogTitle>Process Invoice</DialogTitle>
                <DialogContent>
                    <FormControl fullWidth>
                        <InputLabel id="selectTemplateLabel">Template</InputLabel>
                        <Select
                            labelId="selectTemplateLabel"
                            id="selectTemplate"
                            value={selection}
                            onChange={handleChange}
                            label="Template"
                        >
                            <MenuItem value={'DELL'}>DELL</MenuItem>
                            <MenuItem value={'AI'}>Automatic AI</MenuItem>
                            <MenuItem value={'30'}>Thirty</MenuItem>
                        </Select>
                    </FormControl>
                    <FormControl fullWidth>
                        <TextField label="Debtor Number"/>
                    </FormControl>
                    <FormControl>
                        <Typography>{filePath ? 'File name:' : ''} {filePath}</Typography>
                        <Button
                            variant="contained"
                            component="label"
                            size="large"
                        >
                            SELECT FILE
                            <input type="file" hidden onChange={(e) => setFilePath(e.target.files[0].name)}/>
                        </Button>
                    </FormControl>
                    <DialogActions>
                        <Button 
                        variant="contained" 
                        onClick={() => {
                            closeAction();
                            setFilePath('');
                        }}
                        component={Link} 
                        to={'/process'}
                        >Process</Button>
                    </DialogActions>
                </DialogContent>
            </Dialog>
    );
}

Answer 1

我通过在 html 正文中添加一些 css 来解决这个问题。

body {
  margin: 0;
  padding: 0;
}

Answer 2

很有可能是因为你混合了@mui 和@material-ui。