reactjs - Does Material UI Grid Item require defined breakpoints on positional properties ? (textAlign / text-align in my case)

Question

extension to this question: How to horizontally center an item in Material UI grid item?

I've noticed this behavior but I was unable to find corresponding explanation in my look into the Grid documentation for material UI

in essence, I have a button within a grid item that is in a grid container that I am trying to center. It looks like this

      <Grid container>
    <Grid item xs={9}>
    </Grid>
    <Grid item xs={3}>
          <Grid item xs={12} style={{textAlign: "center"}}>
            <Button>Create a Post</Button>
          </Grid>
    </Grid>
  </Grid>

The code above only runs because I provided the breakpoint of xs={12}, without which it would refuse to center the element.

My question being, is this a requirement that I provide a breakpoint when I attempt to center elements?

question from:https://stackoverflow.com/questions/65869121/does-material-ui-grid-item-require-defined-breakpoints-on-positional-properties

Answer 1

First of all, give your Element inside a grid a fullWidth property, otherwise it is not going to display as you wish.
By default your element is not centered inside of grid, so yes, you need to provide some styles. No need to make a grid inside of another grid. If you fork your code in sandbox, I can help more.

<Grid item xs={3}  style={{//center here, using flexbox or something else}}>          
   <Button fullWidth>Create a Post</Button>          
</Grid>