如何将 props.theme.breakpoints 与 makeStyles 钩子一起使用

Question

所以我尝试使用这里给出的材料断点 https://material-ui.com/customization/breakpoints/以及makeStyles钩子。在尝试进行响应式样式时，我无法使用 props.breakpoints.down('600'(。如何在 makeStyles 钩子中使用断点？

  bottom: '64px',
  height: '54px',
  backgroundImage: 'none',
  color: 'red'
}

我已经试过了，但它就是不起作用。

export const useStyles = makeStyles({
  Container: {
    position: 'absolute',
    zIndex: '5',
    bottom: '0',
    paddingTop: ' 1%',
    left: ' 0',
    zIndex: '10',
    width: '100vw',
    backgroundImage: 'linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(45, 49, 55, 0.81))',
    display: 'block',
    // height: "74px"
    height: props => props.captionHeight,
    [props => props.breakpoints.down('600')]: {
      bottom: '64px',
      height: '54px',
      backgroundImage: 'none',
      color: 'red'
    }
  }});
I expect to be able to have apply the styles when the screenwidth is lesser than 600px using the material-ui breakpoints api.

Answer 1

可以使用主题的"断点"属性来指定断点。在此示例中，当窗口宽度超过 600px 时，背景颜色属性为蓝色。

下面是代码沙箱中的工作示例：https://codesandbox.io/s/eager-benz-697f2?fontsize=14&hidenavigation=1&theme=dark

const useStyles = makeStyles(theme => ({
    s1: {
        backgroundColor: 'red',
        [theme.breakpoints.up('600')]: {
            backgroundColor: 'blue'
        }
    },
    s2: {
        backgroundColor: 'green'
    }
}));

Answer 2

得到答案。

export const useStyles = makeStyles(theme => {})

工程！