[Grid] Support for alignSelf prop

[damianobarbati]

• I have searched the issues of this repository and believe that this is not a duplicate.

As the title says, adding align-self rule to Grid component like <Grid item={true} alignSelf={'flex-end'} /> would be great => https://css-tricks.com/almanac/properties/a/align-self/

[oliviertassinari]

The Grid component tries to stick to the nominal use cases (both for API size and bundle size constraints). If you need more advanced use cases, you might want to extend the component in userland.

[oliviertassinari]

I have added the waiting for users upvotes tag. I'm closing the issue as I'm not sure people are looking for such abstraction. So please upvote this issue if you are. We will prioritize our effort based on the number of upvotes.

[mcobzarenco]

Stumbled across this issue, I am struggling to figure out how to achieve the equivalent of flexbox's align-self: xxx using <Grid>

    <Grid
      container
      direction="column"
      alignItems="stretch"
      spacing={3}>
   
      <Grid item alignSelf="center"> //???
          <div> Centered text  </div>
      </Grid>

   </Grid>

[IAmMarcellus]

@mcobzarenco I don't think they ever fixed this issue. Somone created another issue for it here: #11552, but it was closed as a part of #6140, although that never resolved it. @oliviertassinari any word on if this will be resolved?

[oliviertassinari]

This feature should come for free with #15561

[vicasas]

@damianobarbati @mcobzarenco As an alternative solution, the Box component can be used to pass it through the Grid prop component, thus injecting us with the functionalities of the Box api that includes alignSelf

Example

<Grid component={Box} item alignSelf='center'>
   ...
</Grid>

This works for me

[oliviertassinari]

@vicasas We have been discussing making this the default in v5 with @mnajdova.

[vicasas]

@oliviertassinari @mnajdova Can the following be used?

export const styles = () => ({
  'align-self-xs-start': {
    alignSelf: 'start',
  },
  'align-self-xs-center': {
    alignSelf: 'center',
  },
  'align-self-xs-end': {
    alignSelf: 'end',
  },
})

const Grid = React.forwardRef(function Grid(props, ref) {
  const {
    alignSelf = 'stretch',
  } = props

  const className = clsx(
    classes.root,
    {
      ...
      [classes[`align-self-xs-${String(alignSelf)}`]]: alignSelf !== 'stretch',
      ...
    },
    classNameProp,
  );

  return <Component className={className} ref={ref} {...other} />;
}

[oliviertassinari]

@vicasas I meant using https://material-ui.com/system/flexbox/

[vicasas]

@oliviertassinari I tried to make a POC but I don't understand how to use the API from the import. I've never done it like this. Is it necessary to use style-component to wrap flexbox? I don't know if there will be any thread of this maybe to look at there.

[oliviertassinari]

@vicasas The first step is to migrate the component from @material-ui/styles to @material-ui/styled-engine. The closest example is in #24114. Second step is to apply the flexbox style functions. Et voilà.

[oliviertassinari]

@mnajdova has solved the issue in v5.0.0-alpha.24 with #24499:

import * as React from "react";
import Paper from "@material-ui/core/Paper";
import Grid from "@material-ui/core/Grid";

export default function CenteredGrid() {
  return (
    <Grid container flexDirection="column">
      <Grid item alignSelf="flex-end">
        <Paper
          sx={{
            p: 2,
            color: "primary.contrastText",
            bgcolor: "primary.main",
          }}
        >
          xs=6
        </Paper>
      </Grid>
    </Grid>
  );
}

https://codesandbox.io/s/centeredgrid-material-demo-forked-rty3m?file=/demo.tsx:0-508