Display Helpers rules overwritten by default styles

[suamai]

I've been trying to use the display helper classes, but they don't seem to work on most components due to the order in which rules are added to the generated css.

For example, using the class d-md-none on the AppBar component will add the rule display: none when the media query matches, as expected; but the rule appears way too early on the generated css, before the rules applied to the s-app-bar class, so it's overwritten by the default display: block.

Edit: Just tested using the SvelteKit template suggested on the documentation ( npx degit TheComputerM/sveltekit-materialify my-project ), with the same results.