React

Opinionated utility to override CSS Modules.

Motivation

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.

Examples

Cool examples can be found here

Installation

yarnaddreact-klazs

Usage

// Paragraph.jsimportklazsfrom'react-klazs';conststyles={textPrimary: 'innerText',}constParagraph=props=>{const{ children }=props;constmyKlazs=klazs(styles,props);return<pclassName={myKlazs.textPrimary}>{children}</p>;};

Then you can override all the classes inside your component from the props.

importParagraphfrom'./Paragraph';constCoolParagraph=()=>(<ParagraphoverrideClasses={{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.

License

MIT Licensed. Copyright (c) | Neomaxzero.