Global Components FAQ

Can I use !important in a custom-option?

Yes, but to avoid errors, it should be written like this: unquote('value !important')

I’m applying a different font in the modifier, but it keeps using the default component font.

If the font in the default component has a smaller height, it won’t be overridden because the className property operates with extends. Extends retain the CSS order of the class they extend, and font-a will always appear before others, so it won’t override another font class. In cases like this, even if additional code is added, it’s best to include the mixin of the desired font directly. This way, if the font changes in the future, it will still follow the intended logic and styling.

I want to add an underline on hover to some text, but the only hover option available is text-underline-color.

This is because text-decoration doesn’t support transitions, whereas text-underline-color does. If we want to underline something on hover, we should add the underline in its default state but make it transparent, then change the color on hover.