如何将 props.theme.breakpoints 与 makeStyles 挂钩使用？答案

【问题标题】：How do i use props.theme.breakpoints with the makeStyles hooks?如何将 props.theme.breakpoints 与 makeStyles 挂钩使用？
【发布时间】：2019-12-02 00:48:22
【问题描述】：

所以我尝试使用这里给出的材料断点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.

【问题讨论】：

标签： javascript reactjs material-ui react-hooks

【解决方案1】：

您可以使用主题的“断点”属性来指定断点。在本例中，当窗口宽度超过 600 像素时，您将背景颜色属性设置为蓝色。

这是代码沙箱中的工作示例： 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'
    }
}));

【讨论】：

如果您使用的是 material-ui 版本 5+，则此答案不相关
@KunalTyagi 但答案是在 v5 发布之前给出的

【解决方案2】：

找到答案了。

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

有效！

【讨论】：