const overlayDivStyles = {
                    backgroundColor: "red",
                    width: "100%",
                    height: "100%",
                    display: "flex",
                    justifyContent: "center",
                    position: "absolute",
                    zIndex: 2,
                };

  const domOverlay = document.createElement("div");
  domOverlay.classList.add("map-overlay");
  domOverlay.innerHTML = `<h4>No locations exist with these current filters<h3>`;
  //assign my styles to the overlay Div
  Object.assign(domOverlay.style, overlayDivStyles);

<?php
/**
 * Gutenberg Examples Stylesheets
 */
 
function gutenberg_examples_02_register_block() {
    wp_register_script(
        'gutenberg-examples-02',
        plugins_url( 'block.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'block.js' )
    );
 
    wp_register_style(
        'gutenberg-examples-02-editor',
        plugins_url( 'editor.css', __FILE__ ),
        array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'editor.css' )
    );
 
    wp_register_style(
        'gutenberg-examples-02',
        plugins_url( 'style.css', __FILE__ ),
        array( ),
        filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
    );
 
    // Allow inlining small stylesheets on the frontend if possible.
    wp_style_add_data( 'gutenberg-examples-02', 'path', dirname( __FILE__ ) . '/style.css' );
 
    register_block_type( 'gutenberg-examples/example-02-stylesheets', array(
        'api_version' => 2,
        'style' => 'gutenberg-examples-02',
        'editor_style' => 'gutenberg-examples-02-editor',
        'editor_script' => 'gutenberg-examples-02',
    ) );
}
add_action( 'init', 'gutenberg_examples_02_register_block' );