add styles prop to README and demo

README.md

@@ -46,7 +46,8 @@ For more in-depth examples, take a look at the [demo code](docs/demo.jsx) to see
 | `counterClockwise` | Toggle whether to rotate progressbar in counterclockwise direction. Default: `false`. |
 | `classForPercentage` | Function which returns an additional class to apply to top-level svg element, which can be used for coloring/styling percentage ranges differently. Example: `(percent) => percent < 100 ? 'incomplete' : 'complete'`. |
 | `textForPercentage` | Function which returns text to display, can be configured based on percentage. Example: ``(pct) => `${pct}%` ``. |
-| `classes` | Object mapping to override classNames of each svg element (root, trail, path, text, background). Enables styling with react-jss. See [this PR](https://github.com/iqnivek/react-circular-progressbar/pull/25) for more detail. |
+| `classes` | Object allowing overrides of classNames of each svg subcomponent (root, trail, path, text, background). Enables styling with react-jss. See [this PR](https://github.com/iqnivek/react-circular-progressbar/pull/25) for more detail. |
+| `styles` | Object allowing customization of styles of each svg subcomponent (root, trail, path, text, background). |
 
 
 ## Customizing styles

docs/demo.jsx

@@ -34,8 +34,24 @@ class ChangingProgressbar extends React.Component {
     }, this.props.interval);
   }
 
+  getStyles() {
+    return this.props.stylesForPercentage ? (
+      this.props.stylesForPercentage(this.getCurrentPercentage())
+    ) : {};
+  }
+
+  getCurrentPercentage() {
+    return this.props.percentages[this.state.currentPercentageIndex];
+  }
+
   render() {
-    return <CircularProgressbar {...this.props} percentage={this.props.percentages[this.state.currentPercentageIndex]} />;
+    return (
+      <CircularProgressbar
+        {...this.props}
+        percentage={this.getCurrentPercentage()}
+        styles={this.getStyles()}
+      />
+    );
   }
 }
 ChangingProgressbar.defaultProps = {
@@ -59,6 +75,14 @@ class Demo extends React.Component {
           <div className="col-xs-6 offset-xs-3 col-md-2 offset-md-5">
             <ChangingProgressbar
               percentages={[0, 20, 40, 60, 80, 100]}
+              stylesForPercentage={(percentage) => {
+                const alpha = (100 + percentage) / 200;
+                return {
+                  path: {
+                    stroke: `rgba(62, 152, 199, ${alpha})`,
+                  },
+                };
+              }}
             />
           </div>
         </div>

docs/index.js

@@ -6584,6 +6584,7 @@ var CircularProgressbar = function (_React$Component) {
           textForPercentage = _props.textForPercentage,
           className = _props.className,
           classes = _props.classes,
+          styles = _props.styles,
           strokeWidth = _props.strokeWidth;
 
       var classForPercentage = this.props.classForPercentage ? this.props.classForPercentage(percentage) : '';
@@ -6598,12 +6599,14 @@ var CircularProgressbar = function (_React$Component) {
         },
         this.props.background ? _react2.default.createElement('circle', {
           className: classes.background,
+          style: styles.background,
           cx: CENTER_X,
           cy: CENTER_Y,
           r: FULL_RADIUS
         }) : null,
         _react2.default.createElement('path', {
           className: classes.trail,
+          style: styles.trail,
           d: pathDescription,
           strokeWidth: strokeWidth,
           fillOpacity: 0
@@ -6613,12 +6616,13 @@ var CircularProgressbar = function (_React$Component) {
           d: pathDescription,
           strokeWidth: strokeWidth,
           fillOpacity: 0,
-          style: this.getProgressStyle()
+          style: Object.assign({}, styles.path, this.getProgressStyle())
         }),
         text ? _react2.default.createElement(
           'text',
           {
             className: classes.text,
+            style: styles.text,
             x: CENTER_X,
             y: CENTER_Y
           },
@@ -6635,6 +6639,7 @@ CircularProgressbar.propTypes = {
   percentage: _propTypes2.default.number.isRequired,
   className: _propTypes2.default.string,
   classes: _propTypes2.default.objectOf(_propTypes2.default.string),
+  styles: _propTypes2.default.objectOf(_propTypes2.default.object),
   strokeWidth: _propTypes2.default.number,
   background: _propTypes2.default.bool,
   backgroundPadding: _propTypes2.default.number,
@@ -6654,6 +6659,13 @@ CircularProgressbar.defaultProps = {
     text: 'CircularProgressbar-text',
     background: 'CircularProgressbar-background'
   },
+  styles: {
+    root: {},
+    trail: {},
+    path: {},
+    text: {},
+    background: {}
+  },
   background: false,
   backgroundPadding: null,
   initialAnimation: false,

src/index.jsx

@@ -70,7 +70,7 @@ class CircularProgressbar extends React.Component {
     `;
   }
 
-  getProgressStyle() {
+  getPathStyles() {
     const diameter = Math.PI * 2 * this.getPathRadius();
     const truncatedPercentage = Math.min(Math.max(this.state.percentage, MIN_PERCENTAGE), MAX_PERCENTAGE);
     const dashoffset = ((100 - truncatedPercentage) / 100) * diameter;
@@ -88,7 +88,14 @@ class CircularProgressbar extends React.Component {
   }
 
   render() {
-    const { percentage, textForPercentage, className, classes, styles, strokeWidth } = this.props;
+    const {
+      percentage,
+      textForPercentage,
+      className,
+      classes,
+      styles,
+      strokeWidth,
+    } = this.props;
     const classForPercentage = this.props.classForPercentage ? this.props.classForPercentage(percentage) : '';
     const pathDescription = this.getPathDescription();
     const text = textForPercentage ? textForPercentage(percentage) : null;
@@ -123,7 +130,7 @@ class CircularProgressbar extends React.Component {
           d={pathDescription}
           strokeWidth={strokeWidth}
           fillOpacity={0}
-          style={Object.assign({}, styles.path, this.getProgressStyle())}
+          style={Object.assign({}, styles.path, this.getPathStyles())}
         />
 
         {