I want to override styles of component if on mobile device - Reactjs

checkFullScreen () {
    let state = this.state
    if (this.mobilecheck() === true) {
      styles({dialogPaper: 'block'})
      this.setState(state)
    }
  }

const styles = theme => ({
  dialogPaper: {
    height: '90%'
  },
})

checkFullScreen () {
    let state = this.state
    if (this.mobilecheck() === true) {
      styles({dialogPaper: 'block'})
      this.setState(state)
    }
  }

return (

      <Dialog
        open={this.props.open}
        className={classes.dialog}
        classes=
      >

I currently have a mobile check function that works perfectly with another function i have created. I want to use it in a similar way as i have and previously. I want to override styles to something else when the screen is a small device.

I have created a function called checkFullScreen which i want to call on render. Im not sure where to put the function where the css is called as paper: .. in the return