Css 如何将React Material UI中TextField的标签水平对齐在中间？

我想水平对齐此文本字段中心的标签：

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";       
        
        export default function BasicTextField() {
          return (
              <TextField
                id="standard-basic"
                label="Standard"/>
          );
        }

从“React”导入React；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/TextField”导入TextField；
导出默认函数BasicTextField（）{
返回(
);
}

到目前为止，我能够在右侧对齐标签：

import React from "react";
import { withStyles } from "@material-ui/core/styles";
import TextField from "@material-ui/core/TextField";       

const StyledTextField = withStyles({
          root: {
            "& label": {
              transformOrigin: "top right",
                right: "0",
                left: "auto" 
            }
          }
        })(TextField);
        
        export default function BasicTextField() {
          return (
              <StyledTextField
                id="standard-basic"
                label="Standard"/>
          );
        }

从“React”导入React；
从“@material ui/core/styles”导入{withStyles}”；
从“@material ui/core/TextField”导入TextField；
const StyledTextField=带样式({
根目录：{
“&标签”：{
transformOrigin:“右上角”，
右：“0”，
左：“自动”
}
}
})（文本字段）；
导出默认函数BasicTextField（）{
返回(
);
}

---

有没有办法将标签水平居中对齐？

您可以使用长方体组件将标签居中，如下所示：

<Box display="flex" justifyContent="center">
    <StyledTextField id="standard-basic" label="Standard"/>
</Box>

或网格组件：

<Grid container
  direction="row"
  justify="center"
  alignItems="center"
>
  <StyledTextField id="standard-basic" label="Standard"/>
</Grid>

试试这个

root: {
        "& label": {
          width: "100%",
          textAlign: "center",
          transformOrigin: "center",
            "&.Mui-focused": {
              transformOrigin: "center"
            }
         }
      }

---

谢谢这不符合预期。该字段居中，但不是标签。@innoxius刚刚编辑了答案，我认为正确的变量非常感谢！它就像一个符咒。