WP Gutenberg block callback - How to add dynamic css (to head)?

Question

I've made a custom block that would require some custom css. I can't do this inline as an attribute to the element since it has some conditional @media stuff in it.

I thought of using the actions wp_enqueue_scripts or wp_head.

This is the simplified last part of my block callback:

    $custom_css = "
        #rtt-row-{$attributes['clientId']}{
            background: 'red';
        }";

    add_action( 'wp_enqueue_scripts', function () use ($custom_css) {
        wp_add_inline_style( 'custom-css', $custom_css );
    });
    
    return sprintf(
        '<div %1$s class="%2$s">
                %3$s
            </div>',

        (array_key_exists('clientId', $attributes) && !empty($attributes['clientId'])) ? 'id="rtt-row-' . $attributes['clientId'] . '"' : '',
        esc_attr(implode(' ', $classes)),
        $content
    );

And I'v tried

        add_action('wp_head', function () use ($custom_css) {
            echo '<style>';
            echo $custom_css ;
            echo '</style>';
        });

what does work is echoing the <style> into the body. But is that the cleanest?

    return sprintf(
        '<style type="text/css">%4$s</style>
         <div %1$s class="%2$s">
            %3$s
        </div>',

        (array_key_exists('clientId', $attributes) && !empty($attributes['clientId'])) ? 'id="rtt-row-' . $attributes['clientId'] . '"' : '',
        esc_attr(implode(' ', $classes)),
        $content,
        $custom_css
    );

Any pointers are welcome