https://github.com/neomaxzero/react-klazs

:grey_exclamation:Override react CSS classes with ease
https://github.com/neomaxzero/react-klazs

classnames css css-modules react

Last synced: 3 months ago
JSON representation

:grey_exclamation:Override react CSS classes with ease

• Host: GitHub
• URL: https://github.com/neomaxzero/react-klazs
• Owner: neomaxzero
• Created: 2018-03-25T14:18:25.000Z (almost 8 years ago)
• Default Branch: master
• Last Pushed: 2018-04-10T02:31:50.000Z (almost 8 years ago)
• Last Synced: 2025-02-08T01:27:55.610Z (12 months ago)
• Topics: classnames, css, css-modules, react
• Language: JavaScript
• Homepage:
• Size: 947 KB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          


  React

  


  

  

  


[![Build Status](https://travis-ci.org/neomaxzero/react-klazs.svg?branch=master)](https://travis-ci.org/neomaxzero/react-klazs)

[![Coverage Status](https://coveralls.io/repos/github/neomaxzero/react-klazs/badge.svg?branch=master)](https://coveralls.io/github/neomaxzero/react-klazs?branch=master)

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](https://github.com/neomaxzero/react-klazs/tree/master/src/examples)

## Installation

```js

yarn add react-klazs

```

## Usage 

```js

// Paragraph.js

import klazs from 'react-klazs';

const styles = {

    textPrimary: 'innerText',

}

const Paragraph = props => {

  const { children } = props;

  const myKlazs = klazs(styles, props);

  return 
 {children}
;

};


```

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

```js

import Paragraph from './Paragraph';

const CoolParagraph = () => 

    (

        React Klazs is awesome. Dan abramov and Sophie Bits recomended without even knowing.

    )

```

The resulting CSS class for the Component will be the merged css classes for that tag.

# License

MIT Licensed. Copyright (c)  | Neomaxzero.