React中如何居中Material UI的<TextField>元素？

问题核心是Material UI的<TextField>为封装组件，直接给自定义className的样式会被MUI内置样式覆盖，或是未作用到正确的DOM节点上。以下是几种可行的解决办法：

方案1：使用MUI的sx属性（推荐） #

直接在TextField上通过sx属性设置样式，这是MUI官方推荐的内联样式方案，优先级更高：

<Container maxWidth="md">
  <TextField
    id="outlined-read-only-input"
    label="Username"
    sx={{
      display: 'block',
      margin: '0 auto 20px',
      width: 300
    }}
  /> 
  <TextField
    id="outlined-read-only-input"
    label="Password"
    sx={{
      display: 'block',
      margin: '0 auto 20px',
      width: 300
    }}
  /> 
</Container>

若需复用样式，可将sx对象抽成变量：

const inputStyle = {
  display: 'block',
  margin: '0 auto 20px',
  width: 300
};

// 调用时
<TextField sx={inputStyle} ... />

方案2：用styled组件创建自定义TextField #

通过@mui/material/styles的styled方法封装带样式的TextField，适合需多次复用的场景：

import { styled } from '@mui/material/styles';
import TextField from '@mui/material/TextField';

const CenteredTextField = styled(TextField)({
  display: 'block',
  margin: '0 auto 20px',
  width: 300
});

// 使用示例
<Container maxWidth="md">
  <CenteredTextField
    id="outlined-read-only-input"
    label="Username"
  /> 
  <CenteredTextField
    id="outlined-read-only-input"
    label="Password"
  /> 
</Container>

方案3：类名穿透（不推荐，依赖DOM结构） #

若坚持使用自定义CSS，可通过MUI的类名前缀穿透到内部容器。TextField根容器默认类名为.MuiTextField-root，CSS写法如下：

.login__input .MuiTextField-root {
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  width: 300px;
}

然后给包裹TextField的容器添加login__input类：

<Container maxWidth="md" className="login__input">
  <TextField ... />
  <TextField ... />
</Container>

注意：该方案依赖MUI的DOM结构与类名，版本更新后可能失效，优先推荐前两种方案。

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