Trying to center Material UI <TextField> element in React-CodePudding

I'm trying to center two <TextArea> elements using material ui and React.

They are all in the same <div> and have same className. I've tried using the !important designation in CSS. Nothing seems to work on the MUI elements. A traditional <input> does what I want the other two to do using the same CSS. How do I center the <TextField> elements?

JSX

<Container maxWidth="md">
<TextField
id="outlined-read-only-input"
label="Username"
/> 
<TextField
id="outlined-read-only-input"
label="Password"
/> 
</Container>

CSS

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


  [1]: https://i.stack.imgur.com/qu0xa.png

CodePudding user response：

Try using Grid elements for positioning.

https://mui.com/material-ui/react-grid/

<Grid container justifyContent="center" spacing={2}>
 <Grid item xs={10}>
  <TextField
   id="outlined-read-only-input"
   label="Username"
  /> 
 </Grid>
 <Grid item xs={10}>
  <TextField
   id="outlined-read-only-input"
   label="Password"
  /> 
 </Grid>
</Grid>