Custom Styling with Plain CSS

[brian-t-allen]

I'm trying to style the overlay and spinner using plain CSS (to reduce the amount of code as LoadingOverlay is used throughout the app) .

Here is my CSS:
._loading_overlay_overlay {
background: rgba(0, 0, 0, 0.2) !important;
border-radius: 10px !important;
}
._loading_overlay_spinner {
width: 100px !important;
}
._loading_overlay_spinner svg circle: {
stroke: rgba(0, 135, 196, 0.8) !important;
}

The first two work, because they're operating directly on an element with a specified class.

The third one, to modify the stroke on the SVG circle, doesn't work. I can get it to work using the style={{}} syntax and '& svg circle', but that involves duplicating the code repeatedly.

Can class selectors be added to the SVG and circle elements so they can be styled directly? It seems like the selector '._loading_overlay_spinner svg circle' or '._loading_overlay_spinner::before svg circle' or '._loading_overlay_spinner > svg > circle' should work, but they don't.

Thanks!