How to style React components

00 README.md

How to style React components

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.

1. 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 pros, can be done without sass.
• Cons: You need to manually combine styles in js.

2. 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

PS: webpack loader config part

01 BaseComponent.jsx

import React from 'react';
import baseStyles from './base.sass';

export default ({styles=baseStyles}) => (
  <div className={styles.main}>
    <div className={styles.someOtherStyle}>
      HELLO WORLD
    </div>
  </div>
);

02 howToUseWithDifferentStyles.jsx

import React from 'react';
import BaseComponent from './BaseComponent.jsx';

import baseStyles from './base.sass';
import myStyleSimple from './myStyleSimple.sass';
import myStyles from './myStyle.sass';

export default () => (
  // using base classes
  <BaseComponent styles={baseStyles} />
  
  // using css-modules composition
  <BaseComponent styles={{...myStyleSimple, ...baseStyles}} />
  
  // using copied and extended style
  <BaseComponent styles={myStyles} />
);

03 base.sass

.main
  width: 100%
  height: 100%
  background-color: blue

.someOtherStyle
  ...
  ...

04 myStyleSimple.sass

.main
  composes: main from "./base.sass";
  background-color: red

05 myStyle.sass

// create a copy of base.sass
@import './base.sass'

// With css-modules this will not change
// styles of controls which uses base.sass
.main
  background-color: red

06 somewhere_in_webpack_config.js

// webpack loader example
module: {
  loaders: [
    { 
      test: /\.sass$/, 
      loader: 
        'style-loader!' + 
        'css-loader?modules&importLoaders=2&localIdentName=[name]__[local]--[hash:base64:3]!' +
        'postcss-loader!' +
        'sass-loader?precision=10&indentedSyntax=sass'
    },
  ...
  ]
}