[英]How to align horizontally the label of TextField in React Material-UI at the center?
I'd like to align horizontally the label at the center of this TextField:我想在这个TextField的中心水平对齐label:
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"/>
);
}
So far I was able to align the label at the right:到目前为止,我能够在右侧对齐 label:
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"/>
);
}
Is there a way to align the label horizontally at the center?有没有办法在中心水平对齐 label?
Try this尝试这个
root: {
"& label": {
width: "100%",
textAlign: "center",
transformOrigin: "center",
"&.Mui-focused": {
transformOrigin: "center"
}
}
}
You can use a Box component to center your label like this:您可以使用 Box 组件将 label 居中,如下所示:
<Box display="flex" justifyContent="center">
<StyledTextField id="standard-basic" label="Standard"/>
</Box>
Or a Grid component:或 Grid 组件:
<Grid container
direction="row"
justify="center"
alignItems="center"
>
<StyledTextField id="standard-basic" label="Standard"/>
</Grid>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.