3 ms·
.button is the default .button-context is the context version className={isContext ? ".button--context" : ".button"} ---- alternatively if you want many unre
by mixedCase 5y ago
.button is the default
.button-context is the context version
className={isContext ? ".button--context" : ".button"}
----
alternatively if you want many unrelated base rules that aren't color/padding as a baseline:
.button contains base rules
.button--default default color/padding
.button--context contextful color/padding
className={`.button ${isContext ? ".button--context" : ".button--default"}`}
- azangru 5y agoYeah, sounds sensible. What I've been doing so far was attempting to extend the base class like so: import classNames from 'classnames'; ... className = classNames(styles.buttton, props.className); But this leaves me at the mercy of the order in which webpack builds stylesheets (sometimes props.className will be defined after styles.button and my plan would work; other times it will get defined before styles.button, and styles.button will override the CSS rules of props.className). Really wanted the extension of the base rules to work out; but I guess you are right: the className from the props should override entirely one of the classNames of the component.
- docmars 5y agoUse Twin Macro for Tailwind-in-JS — you won't regret it!