CODEWITHSUNDEEP
material-ui
EmmanuelM
EmmanuelM

Reputation: 68

How to use CSS API of Grid Component

I'm trying to use the Grid component but I can't find out how to use the CSS API. Ths docs doesn't help me. I just don't get it..

Can someone please help me ?

I know this is not a really good place, sorry, but I can't find any answer anywhere confused

Upvotes: 0

Views: 394

Answers (1)

Ken Gregory
Ken Gregory

Reputation: 7400

Ideally, you'd set direction to row and override the direction-xs-row class with the name of a class you define (which would set direction to column-reverse), but there are no classes exposed for overriding row for any breakpoint.

You could go the other way, setting direction to column-reverse and overriding direction-*-column-reverse (for all other breakpoints), but that would be tedious and somewhat insane.

The only way to do this at the moment would be to set the className prop to apply some responsive styling via JSS and withStyles:

// create a class that will set flex-direction for the xs breakpoint
const styles = theme => ({
  [theme.breakpoints.down('xs')]: {
      responsiveDirection: {
        flexDirection: 'column-reverse',
      },
  },
});

// use withStyles to make the class available via the `classes` prop
export default withStyles(styles)(InteractiveGrid);

Then pass your class name, classes.responsiveDirection in this example, as the Grid's className prop:

          {/* we would normally destructure classes from this.props */}
          <Grid
            container
            className={this.props.classes.responsiveDirection}
          >

Check this codesandbox for a working example.

Upvotes: 2

Related Questions