使用MUI开发WordPress插件后台管理页面遭遇CSS优先级问题求助

我用MUI开发WordPress插件的后台管理页面，遇到了CSS优先级冲突问题，导致组件样式不符合预期：

• 预期效果：预期界面
• 实际效果：实际界面

我的代码如下：

import React from 'react';
import ReactDOM from 'react-dom/client';
import Paper from '@mui/material/Paper';
import FormGroup from "@mui/material/FormGroup";
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import Button from "@mui/material/Button";
import Box from "@mui/material/Box";
import StyledEngineProvider from "@mui/material/StyledEngineProvider";

const root = ReactDOM.createRoot(document.getElementById('wpbody'));
root.render(
    <Paper sx={{padding: 3}}>
        <Typography sx={{padding: 1}}>基础设置</Typography>
        <FormGroup sx={{maxWidth: 300}}>
            <TextField id="standard-basic" label="App ID" variant="filled" sx={{margin: 1}}/>
            <TextField id="standard-basic" label="App Secret" variant="filled" sx={{margin: 1}}/>
            <Box>
                <Button variant="contained" sx={{margin: 1}}>保存</Button>
            </Box>
        </FormGroup>
    </Paper>
);

解决思路及方案 #

1. 启用MUI样式优先注入

你已经导入了StyledEngineProvider，但未用它隔离样式。将根组件包裹在StyledEngineProvider中并开启injectFirst，让MUI样式表优先加载，覆盖WordPress默认样式：

root.render(
  <StyledEngineProvider injectFirst>
    <Paper sx={{padding: 3}}>
      <Typography sx={{padding: 1}}>基础设置</Typography>
      <FormGroup sx={{maxWidth: 300}}>
          <TextField id="standard-basic" label="App ID" variant="filled" sx={{margin: 1}}/>
          <TextField id="standard-basic" label="App Secret" variant="filled" sx={{margin: 1}}/>
          <Box>
              <Button variant="contained" sx={{margin: 1}}>保存</Button>
          </Box>
      </FormGroup>
    </Paper>
  </StyledEngineProvider>
);

2. 增强组件样式特异性

对被WordPress样式覆盖的元素，在sx属性中用更具体的选择器强制覆盖：
比如修复TextField的背景样式：

<TextField 
  id="app-id-input" 
  label="App ID" 
  variant="filled" 
  sx={{
    margin: 1,
    '& .MuiFilledInput-root': {
      backgroundColor: '#ffffff',
      '&:hover': {
        backgroundColor: '#f0f0f0',
      },
      '&.Mui-focused': {
        backgroundColor: '#ffffff',
      }
    }
  }}
/>

3. 局部重置冲突样式

在插件的自定义CSS文件中，针对MUI容器重置WordPress的冲突样式：

#wpbody .MuiPaper-root {
  all: revert;
  background-color: #ffffff;
  padding: 24px;
  border-radius: 4px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#wpbody .MuiTextField-root .MuiFilledInput-root {
  background-color: #ffffff;
}

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