React中如何覆盖Material UI Paper组件的max-width根样式？

以下是几种可行的解决方案，针对你遇到的根CSS优先级过高的情况：

• 方法1：使用sx属性结合全局类名提高优先级
  利用Material UI的全局类名（MuiPaper-root和MuiDialog-paper）编写更具体的选择器，确保样式优先级高于动态生成的根CSS：

  <Paper
    elevation={1}
    sx={{
      '&.MuiPaper-root.MuiDialog-paper': {
        maxWidth: '800px', // 替换成你需要的宽度
      }
    }}
  >
    {/* 组件内容 */}
  </Paper>
  

• 方法2：强制覆盖（使用!important）
  若无需纠结样式优先级的优雅性，可直接在sx属性中添加!important强制覆盖原有样式：

  <Paper
    elevation={1}
    sx={{
      maxWidth: '800px !important',
    }}
  >
    {/* 组件内容 */}
  </Paper>
  

• 方法3：自定义Styled组件
  通过styled工具创建自定义Paper组件，精准覆盖目标样式：

  import { styled } from '@mui/material/styles';
  import Paper from '@mui/material/Paper';
  
  const CustomPaper = styled(Paper)(({ theme }) => ({
    '&.MuiDialog-paper': {
      maxWidth: '800px',
    },
  }));
  
  // 使用自定义组件
  return (
    <Container className='formContainer'>
      <CustomPaper elevation={1}>
        {/* 组件内容 */}
      </CustomPaper>
    </Container>
  );
  

• 方法4：检查Dialog的PaperProps（若Paper属于Dialog）
  如果你的Paper是Dialog的内置容器，直接通过Dialog的PaperProps配置样式会更直接：

  <Dialog
    PaperProps={{
      sx: {
        maxWidth: '800px',
      }
    }}
  >
    {/* Dialog内容 */}
  </Dialog>
  

内容的提问来源于stack exchange，提问作者Davesson