Question

我尝试使用Grid组件，但我无法了解如何使用CSS API。文档对我没有帮助。我只是没有得到它..

有人可以帮帮我吗？

我知道这不是一个非常好的地方，抱歉，但我无法在任何地方找到任何答案。

Answer 1

理想情况下，您可以使用您定义的类的名称设置row和override direction-xs-row类的方向（将方向设置为column-reverse ），但是没有为任何断点覆盖row的类。

你可以走另一条路，将方向设置为column-reverse并覆盖direction-*-column-reverse（对于所有其他断点），但这将是乏味且有些疯狂的。

目前执行此操作的唯一方法是将className道具设置为通过JSS和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);

然后在此示例中将您的班级名称classes.responsiveDirection作为网格className道具传递：

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

查看此codesandbox以获取有效工作示例。

如何使用Grid Component的CSS API

1 个答案: