如何在makeStyles钩子中使用props.theme.breakpoints？

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 => {})

成功了！