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

得到答案。

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

有效！

Answer 2

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

这是代码沙箱中的工作示例： npm package

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

如何通过makeStyles挂钩使用props.theme.breakpoints？

2 个答案: