How to use the @material-ui/core/withWidth.isWidthUp function in @material-ui/core

public render() {
        const aboveXl = isWidthUp("xl", this.props.width)
        const url = `https://calculated.gg/replays/${this.props.replay.id}`
        const qrcode = (
            
                
                    
                        
                    

                    
                        {url}
                    

                    
                        
                            Use this with the{" "}
                            <a href="https://play.google.com/store/apps/details?id=gg.calculated.arviewer"></a>

collapsed: false,
                }),
                new Zoom({
                    className: css.olZoom,
                }),
                new ZoomToExtent({
                    className: css.olZoomToExtent,
                    label: img,
                    extent: [
                        -180,-90, 180, 90
                    ],
                }),
                new OverviewMap({
                    className: ['ol-overviewmap', css['ol-custom-overviewmap']].join(' '),
                    collapsible: true,
                    collapsed: !isWidthUp('md', this.props.width),
                    tipLabel: '',
                }),
            ],
            interactions: interaction.defaults({
                keyboard: false,
                altShiftDragRotate: false,
                pinchRotate: false,
            }),
            layers: [
                new Tile({
                    source: new XYZ({
                        projection: 'EPSG:4326',
                        tileGrid: tileGrid,
                        url: this.context.config.BASEMAP_URL,
                        wrapX: true,
                        attributions: this.context.config.BASEMAP_COPYRIGHT,

Upload replays
                                    
                                
                            
                            
                                
                            
                            
                                
                            
                            
                                
                            

                            {isWidthUp("md", this.props.width) ? (
                                <>

public render() {
        const Icon = CloudUpload
        return (
            <>
                {isWidthUp("md", this.props.width) && (
                    <>
                        {this.props.buttonStyle === "floating" && (
                            
                        )}
                        {this.props.buttonStyle === "contained" && (
                            
                        )}
                        {this.props.buttonStyle === "icon" && (
                            
                                
                                    {this.state.currentUploadsCount === 0 ? (
                                        
                                    ) : (

public render() {
        const aboveXl = isWidthUp("xl", this.props.width)
        return (
            
                
                    
                    {this.props.loggedInUser && this.props.loggedInUser.beta ? (
                        
                    ) : (
                        
                    )}
                    {this.props.loggedInUser && this.props.loggedInUser.beta ? (

getGridPadding() {
        return isWidthUp('md', this.props.width) ? 7 : 2;
    }

renderNavBar(inDrawer = false) {
    const { classes, width } = this.props;
    return (
      <nav>
        
          
            
              
                <img height="{19}" src="{logoWhite}" alt="logo">
              
            

            {isWidthUp('md', width)
              ? this.renderDesktopNav()
              : this.renderMobileNav()}
          
        
      </nav>
    );
  }

render() {
        const { colors } = this.props.theme.eventkit;
        const mdUp = isWidthUp('md', this.props.width);
        const lgUp = isWidthUp('lg', this.props.width);

        const cardHeight = this.props.height || 'auto';
        let cardClamp = 2;
        if (lgUp) cardClamp = 6;
        else if (mdUp) cardClamp = 7;

        const styles = {
            card: {
                backgroundColor: colors.secondary,
                position: 'relative',
                height: cardHeight,
            },
            content: {
                display: 'flex',
                flexWrap: 'nowrap',
                height: cardHeight,

const playerSideBar = 
        const playerPlayStyle = (
            
        )
        const playerMatchHistory = (
            
        )

        return (
            <>
                {isWidthUp("md", this.props.width) ? (
                    <>
                        
                            {playerSideBar}
                        
                        
                            
                                
                                    {playerPlayStyle}