如何使用网格组件的CSS API

Question

我正在尝试使用网格组件，但我找不到如何使用CSS API。这些文档对我没有帮助。我只是不明白。.

有人可以帮我吗？

我知道这不是一个非常好的地方，对不起，但我在任何地方都找不到任何答案

Answer 1

理想情况下，您将设置方向以row并使用您定义的类的名称覆盖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(作为 Grid 的className属性传递：

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

检查此代码沙箱以获取工作示例。