Inline style with Media query in Gutenberg block

Question

I have a custom Gutenberg block which has a media uploader in the editor and renders a div with a background image on the front end. I want to use the full image as background on desktop and the thumbnail as background on mobile. Is it possible to use the useMediaQuery hook to achieve this? Any guidance will be greatly appreciated. Below is my code:

const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const { MediaUploadCheck, MediaUpload } = wp.blockEditor;
const { useMediaQuery } = wp.compose;

registerBlockType( 'blockset/test', {
    title: __( 'test' ),
    attributes: {
       imgUrl: { type: 'string', default: '' },
       imgMoUrl: { type: 'string', default: '' },
    },
    edit: (props) {
        return (
        <div className="content">
          <span>Choose a Hero Image</span>
          <MediaUploadCheck>
            <MediaUpload
              onSelect={ ( img ) => {
                props.setAttributes( {
                  imgUrl: img.url,
                  imgMoUrl: img.sizes.thumbnail.url : '',
                } );
              } }
              render={ ( { open } ) => {
                return props.attributes.imgUrl !== ''? (
                    <div className={ 'hero__preview' }>
                      <figure className={ 'image' }>
                        <img
                          src={ props.attributes.imgUrl }
                        />
                      </figure>
                      <Button
                        className={ 'hero__button' }
                        onClick={ open }
                      >
                        Select a New Image
                      </Button>
                    </div>
                  ) : (
                    <div className={ 'hero__container' }>
                      <p className={ 'hero__description' }>
                        Pick a hero image from the media library.
                      </p>
                      <Button
                        className={ 'hero__button' }
                        onClick={ open }
                      >
                        Open Media Library
                      </Button>
                    </div>
                  );
              } }
            />
          </MediaUploadCheck>
        </div>
        );
    },

    save( props ) {
        const isMobile = useMediaQuery( 'max-width:767px' )
        const imgURL = isMobile ? props.attributes.imgMoUrl : props.attributes.imgUrl
        return (
           <div
              className="background-image"
              style={ { backgroundImage: `url(${ imgURL })` } }
            ></div> 
        );
    },
} );

Answer 1

Solved this issue by using the tag.

<style dangerouslySetInnerHTML={ { __html: `
          .background-image {background-image: url(${ props.attributes.imgUrl });}
          @media (max-width: 767px) {
            .background-image {background-image: url(${ props.attributes.imgMoUrl });}
          }
        ` } }></style>