javascript - How do i use props.theme.breakpoints with the makeStyles hooks? - Stack Overflow

admin管理员组

文章数量:1429844

So I am trying to use the material breakpoints / given here along with the makeStyles hook. I am not able to use props.breakpoints.down('600') when trying to make responsive styling. How do I use breakpoints inside of the makeStyles hook ?

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

I've tried this but it just doesnt work.

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.

So I am trying to use the material breakpoints https://material-ui./customization/breakpoints/ given here along with the makeStyles hook. I am not able to use props.breakpoints.down('600') when trying to make responsive styling. How do I use breakpoints inside of the makeStyles hook ?

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

I've tried this but it just doesnt work.

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

Share Improve this question Follow asked Jul 23, 2019 at 22:57 Sashank TungaturthiSashank Tungaturthi 9111 silver badge55 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

You can use the 'breakpoints' property of theme to specify a breakpoint. In this example, you get the background color property to be blue when the width of the window exceeds 600px.

Here is the working example in code sandbox: 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'
    }
}));

Got the answer.

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

works!

本文标签： javascriptHow do i use propsthemebreakpoints with the makeStyles hooksStack Overflow