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

Question

我想将标签水平对齐在这个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"/>
);
}

到目前为止，我能够将标签对准右边：

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"/>
);
}

有没有办法在中心水平对齐标签？

Answer 1

试试这个

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

Answer 2

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

<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>