Added "styles" property.

Author: gajus

README.md

@@ -16,6 +16,7 @@ React CSS Modules implement automatic mapping of CSS modules. Every CSS class is
     - [Module Bundler](#module-bundler)
         - [webpack](#webpack)
         - [Browserify](#browserify)
+    - [Extending CSS Styles](#extending-css-styles)
     - [Decorator](#decorator)
     - [Options](#options)
         - [`allowMultiple`](#allowmultiple)
@@ -153,6 +154,70 @@ Refer to [webpack-demo](https://github.com/css-modules/webpack-demo) or [react-c
 
 Refer to [`css-modulesify`](https://github.com/css-modules/css-modulesify).
 
+### Extending CSS Styles
+
+Use `styles` property to overwrite the default component styles.
+
+Explanation using `Table` component:
+
+```js
+import React from 'react';
+import CSSModules from 'react-css-modules';
+import styles from './table.css';
+
+class Table extends React.Component {
+    render () {
+        return <div styleName='table'>
+            <div styleName='row'>
+                <div styleName='cell'>A0</div>
+                <div styleName='cell'>B0</div>
+            </div>
+        </div>;
+    }
+}
+
+export default CSSModules(Table, styles);
+```
+
+In this example, `CSSModules` is used to decorate `Table` component using `./table.css` CSS Modules. When `Table` component is rendered, it will use the properties of the `styles` object to construct `className` values.
+
+Using `styles` property you can overwrite the default component `styles` object, e.g.
+
+```js
+import customStyles from './table-custom-styles.css';
+
+<Table styles={customStyles} />;
+```
+
+[Interoperable CSS](https://github.com/css-modules/icss) can [extend other ICSS](https://github.com/css-modules/css-modules#dependencies). Use this feature to extend default styles, e.g.
+
+```css
+/* table-custom-styles.css */
+.table {
+    composes: table from './table.css';
+}
+
+.row {
+    composes: row from './table.css';
+}
+
+/* .cell {
+    composes: cell from './table.css';
+} */
+
+.table {
+    width: 400px;
+}
+
+.cell {
+    float: left; width: 154px; background: #eee; padding: 10px; margin: 10px 0 10px 10px;
+}
+```
+
+In this example, `table-custom-styles.css` selectively extends `table.css` (the default styles of `Table` component).
+
+Refer to the [`UsingStylesProperty` example](https://github.com/gajus/react-css-modules-examples/tree/master/src/UsingStylesProperty) for an example of a working implementation.
+
 ### Decorator
 
 ```js

dist/index.js

@@ -1,5 +1,9 @@
 'use strict';
 
+var _lodashLangIsObject2 = require('lodash/lang/isObject');
+
+var _lodashLangIsObject3 = _interopRequireDefault(_lodashLangIsObject2);
+
 Object.defineProperty(exports, '__esModule', {
     value: true
 });
@@ -8,8 +12,6 @@ var _createClass = (function () { function defineProperties(target, props) { for
 
 var _get = function get(_x, _x2, _x3) { var _again = true; _function: while (_again) { var object = _x, property = _x2, receiver = _x3; desc = parent = getter = undefined; _again = false; if (object === null) object = Function.prototype; var desc = Object.getOwnPropertyDescriptor(object, property); if (desc === undefined) { var parent = Object.getPrototypeOf(object); if (parent === null) { return undefined; } else { _x = parent; _x2 = property; _x3 = receiver; _again = true; continue _function; } } else if ('value' in desc) { return desc.value; } else { var getter = desc.get; if (getter === undefined) { return undefined; } return getter.call(receiver); } } };
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
 
 function _inherits(subClass, superClass) { if (typeof superClass !== 'function' && superClass !== null) { throw new TypeError('Super expression must either be null or a function, not ' + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
@@ -18,18 +20,20 @@ var _linkClass = require('./linkClass');
 
 var _linkClass2 = _interopRequireDefault(_linkClass);
 
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { 'default': obj }; }
+
 var decoratorConstructor = undefined,
     functionConstructor = undefined;
 
 /**
  * When used as a function.
  *
  * @param {Function} Component
- * @param {Object} styles CSS Modules class map.
+ * @param {Object} defaultStyles CSS Modules class map.
  * @param {Object} options {@link https://github.com/gajus/react-css-modules#options}
  * @return {Function}
  */
-functionConstructor = function (Component, styles, options) {
+functionConstructor = function (Component, defaultStyles, options) {
     return (function (_Component) {
         _inherits(_class, _Component);
 
@@ -42,6 +46,16 @@ functionConstructor = function (Component, styles, options) {
         _createClass(_class, [{
             key: 'render',
             value: function render() {
+                var styles = undefined;
+
+                if (this.props.styles) {
+                    styles = this.props.styles;
+                } else if ((0, _lodashLangIsObject3['default'])(defaultStyles)) {
+                    styles = defaultStyles;
+                } else {
+                    styles = {};
+                }
+
                 return (0, _linkClass2['default'])(_get(Object.getPrototypeOf(_class.prototype), 'render', this).call(this), styles, options);
             }
         }]);
@@ -53,13 +67,13 @@ functionConstructor = function (Component, styles, options) {
 /**
  * When used as a ES7 decorator.
  *
- * @param {Object} styles CSS Modules class map.
+ * @param {Object} defaultStyles CSS Modules class map.
  * @param {Object} options {@link https://github.com/gajus/react-css-modules#options}
  * @return {Function}
  */
-decoratorConstructor = function (styles, options) {
+decoratorConstructor = function (defaultStyles, options) {
     return function (Component) {
-        return functionConstructor(Component, styles, options);
+        return functionConstructor(Component, defaultStyles, options);
     };
 };
 

src/index.js

@@ -1,4 +1,5 @@
 import linkClass from './linkClass';
+import _ from 'lodash';
 
 let decoratorConstructor,
     functionConstructor;
@@ -7,13 +8,23 @@ let decoratorConstructor,
  * When used as a function.
  *
  * @param {Function} Component
- * @param {Object} styles CSS Modules class map.
+ * @param {Object} defaultStyles CSS Modules class map.
  * @param {Object} options {@link https://github.com/gajus/react-css-modules#options}
  * @return {Function}
  */
-functionConstructor = (Component, styles, options) => {
+functionConstructor = (Component, defaultStyles, options) => {
     return class extends Component {
         render () {
+            let styles;
+
+            if (this.props.styles) {
+                styles = this.props.styles;
+            } else if (_.isObject(defaultStyles)) {
+                styles = defaultStyles;
+            } else {
+                styles = {};
+            }
+
             return linkClass(super.render(), styles, options);
         }
     };
@@ -22,13 +33,13 @@ functionConstructor = (Component, styles, options) => {
 /**
  * When used as a ES7 decorator.
  *
- * @param {Object} styles CSS Modules class map.
+ * @param {Object} defaultStyles CSS Modules class map.
  * @param {Object} options {@link https://github.com/gajus/react-css-modules#options}
  * @return {Function}
  */
-decoratorConstructor = (styles, options) => {
+decoratorConstructor = (defaultStyles, options) => {
     return (Component) => {
-        return functionConstructor(Component, styles, options);
+        return functionConstructor(Component, defaultStyles, options);
     };
 };