Opinionated utility to override CSS Modules.
When building truly reusable components, styling is a controversial topic. There are so many ways to do it that if you don't take a decition, a project with different members will reinvent the wheel every single time, or they will just copy the first alternative they found. Defining a constraint is sometimes useful.
This is the way it worked for us.
Cool examples can be found here
yarn add react-klazs// Paragraph.js
import klazs from 'react-klazs';
const styles = {
textPrimary: 'innerText',
}
const Paragraph = props => {
const { children } = props;
const myKlazs = klazs(styles, props);
return <p className={myKlazs.textPrimary}> {children}</p>;
};Then you can override all the classes inside your component from the props.
import Paragraph from './Paragraph';
const CoolParagraph = () =>
(<Paragraph
overrideClasses={{
textPrimary: "textImportant"
}}
>
React Klazs is awesome. Dan abramov and Sophie Bits recomended without even knowing.
</Paragraph>)The resulting CSS class for the Component will be the merged css classes for that tag.
MIT Licensed. Copyright (c) | Neomaxzero.