How do I override form styles in inuit.css?

Question

Is there a recommended way to override/alter the form styles in inuit.css?

The inuit.css/base/_forms.scss has a rule setting label tags to display: block;, which is breaking a CMS I'm using. Certainly I could modify this file, or remove the import from _inuit.scss, but neither seems like a good approach.

Adding a rule in _vars.scss, which is a recommended approach for overriding defaults doesn't work. Both rules end up in the compiled css file, and the built-in one takes precedence.

Answer 1

In css/style.scss you add your own files like this:

/**
 * She’s all yours, cap’n... Begin importing your stuff here.
 */
//@import "ui/example";
@import
        "ui/base",
        "ui/forms"
;

Now you override display: block; in your own _forms.scss:

label {
    display: inline;
}

Notes:

• The _vars.scss is the recommended way to override inuit.css variables, not styles – Use own imported CSS files to override styles (see above)
• Don't alter the inuit.css files itself, because you'll lose these changes as soon as you update
• Check out the README.md for instructions on how to use inuit.css