I think the issue is that when you reference a symbol, you’re just referencing that chunk and that’s it.
<svg> <style></style> <symbol id="this"></symbol> </svg>
This will go get the symbol, but not the styles:
<svg> <use xlink:href="this"></use> </svg>
You might try putting the style block inside the symbol. I’ve never tried that but it stands to reason it might work. Or, move the style block to the document where you are using