Блог

Я хотел бы выровнять по горизонтали метку в центре этого текстового поля:

 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: {
            "amp; label": {
              transformOrigin: "top right",
                right: "0",
                left: "auto" 
            }
          }
        })(TextField);
        
        export default function BasicTextField() {
          return (
              <StyledTextField
                id="standard-basic"
                label="Standard"/>
          );
        }
 

Есть ли способ выровнять метку по горизонтали в центре?

Попробуйте это

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

Вы можете использовать компонент коробки для центрирования вашей этикетки следующим образом:

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