If you use sass
and css-modules
and want to restyle some base component without changing its code.
(base component already use css-modules and exposes styles
property)
I know two way how to do it.
- Using composes css-modules operator just extend classes you need, then in javascript code combine both styles as {...baseStyle, ...myStyleSimple}
example: myStyleSimple.sass, howToUseWithDifferentStyles.jsx
- Pros: All css-modules (composition)[https://github.com/css-modules/css-modules#composition] pros
- Cons: You need to manually combine styles in js.
- Using @import sass directive just copy base style and use it as usual.
example: myStyle.sass, howToUseWithDifferentStyles.jsx
- Pros: No need to do any operations in js
- Cons: Full style copy, no code reuse