diff --git a/docs/src/content/common-props/common-props.md b/docs/src/content/common-props/common-props.md
index 4096f7fe8..7f7dd61b4 100644
--- a/docs/src/content/common-props/common-props.md
+++ b/docs/src/content/common-props/common-props.md
@@ -165,9 +165,9 @@ _default:_ `containerComponent={<VictoryContainer/>}`
 
 Specify data via the `data` prop. By default, Victory components expect data as an array of objects with `x` and `y` properties. Use the [x][] and [y][] data accessor props to define a custom data format. The `data` prop must be given as an array. Data objects may also include information about ~~styles~~, labels, and props that may be applied to individual data components.
 
-*note:* All values stored on the data object will be interpolated during animation. Do not store functions on data objects.
+_note:_ All values stored on the data object will be interpolated during animation. Do not store functions on data objects.
 
-*note* As of `victory@0.26.0` styles provided via the `data` prop are no longer automatically applied. To use styles from the data object, add functional styles as in the example below.
+_note_ As of `victory@0.26.0` styles provided via the `data` prop are no longer automatically applied. To use styles from the data object, add functional styles as in the example below.
 
 ```playground
 <VictoryScatter
@@ -226,6 +226,65 @@ class App extends React.Component {
 ReactDOM.render(<App/>, mountNode);
 ```
 
+## disableInlineStyles
+
+`type: boolean`
+
+The `disableInlineStyles` prop allows Victory components to work better with CSS classes or styled-components. By default, Victory provides inline styles to chart components, which will override any conflicting CSS styles. This flag will remove the inline styles, making it easier to provide custom styling for components via CSS.
+
+If this prop is passed to a chart type (e.g. `VictoryBar`), it will apply to all data and label components for that chart.
+
+```playground_norender
+
+const StyledBar = styled(Bar)`
+  fill: purple;
+`
+
+const StyledLabel = styled(VictoryLabel)`
+  tspan {
+    fill: magenta;
+    font-family: Papyrus, fantasy;
+  }
+`
+
+function CustomStyledBarChart() {
+  return (
+    <VictoryChart>
+      <VictoryBar
+        disableInlineStyles
+        labels={[1, 2, 3, 4]}
+        dataComponent={<StyledBar />}
+        labelComponent={<StyledLabel />}
+      />
+    </VictoryChart>
+  )
+}
+
+ReactDOM.render(<CustomStyledBarChart/>, mountNode);
+```
+
+It can also be passed to individual data or label components to disable styles on a more granular level.
+
+```playground_norender
+
+const StyledBar = styled(Bar)`
+  fill: purple;
+`
+
+function CustomStyledBarChart() {
+  return (
+    <VictoryChart>
+      <VictoryBar
+        labels={[1, 2, 3, 4]}
+        dataComponent={<StyledBar disableInlineStyles />}
+      />
+    </VictoryChart>
+  )
+}
+
+ReactDOM.render(<CustomStyledBarChart/>, mountNode);
+```
+
 ## domain
 
 `type: array[low, high] || { x: [low, high], y: [low, high] }`
@@ -260,7 +319,7 @@ _examples:_
 - `domainPadding={20}`
 - `domainPadding={{x: [20, 0]}}`
 
-*note* Values supplied for `domainPadding` will be coerced so that padding a domain will never result in charts including an additional quadrant. For example, if an original domain included only positive values, `domainPadding` will be coerced so that the resulted padded domain will not include negative values.
+_note_ Values supplied for `domainPadding` will be coerced so that padding a domain will never result in charts including an additional quadrant. For example, if an original domain included only positive values, `domainPadding` will be coerced so that the resulted padded domain will not include negative values.
 
 ```playground
 <VictoryChart
@@ -344,10 +403,7 @@ externalEventMutations: PropTypes.arrayOf(
     childName: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
     eventKey: PropTypes.oneOfType([
       PropTypes.array,
-      CustomPropTypes.allOfType([
-        CustomPropTypes.integer,
-        CustomPropTypes.nonNegative
-      ]),
+      CustomPropTypes.allOfType([CustomPropTypes.integer, CustomPropTypes.nonNegative]),
       PropTypes.string
     ]),
     mutation: PropTypes.function,
@@ -824,11 +880,11 @@ style={{
 }}
 ```
 
-*note* The `style` prop used by `VictoryAxis` has a different format than the standard `style` prop.
+_note_ The `style` prop used by `VictoryAxis` has a different format than the standard `style` prop.
 
-*note* When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.
+_note_ When a component is rendered as a child of another Victory component, or within a custom `<svg>` element with `standalone={false}` parent styles will be applied to the enclosing `<g>` tag. Many styles that can be applied to a parent `<svg>` will not be expressed when applied to a `<g>`.
 
-*note* custom `angle` and `verticalAnchor` properties maybe included in labels styles.
+_note_ custom `angle` and `verticalAnchor` properties maybe included in labels styles.
 
 _default (provided by default theme):_ See [grayscale theme][] for more detail
 
diff --git a/packages/victory-area/src/helper-methods.js b/packages/victory-area/src/helper-methods.js
index 50f1d12c5..47704a712 100644
--- a/packages/victory-area/src/helper-methods.js
+++ b/packages/victory-area/src/helper-methods.js
@@ -75,7 +75,8 @@ const getBaseProps = (props, fallbackProps) => {
     theme,
     width,
     labels,
-    name
+    name,
+    disableInlineStyles
   } = props;
   const initialChildProps = {
     parent: {
@@ -102,7 +103,8 @@ const getBaseProps = (props, fallbackProps) => {
         data,
         interpolation,
         groupComponent,
-        style: style.data
+        style: disableInlineStyles ? {} : style.data,
+        disableInlineStyles
       }
     }
   };
diff --git a/packages/victory-bar/src/bar.js b/packages/victory-bar/src/bar.js
index 31cd235cf..2f29bef89 100644
--- a/packages/victory-bar/src/bar.js
+++ b/packages/victory-bar/src/bar.js
@@ -146,7 +146,6 @@ Bar.propTypes = {
     })
   ]),
   datum: PropTypes.object,
-  disableInlineStyles: PropTypes.bool,
   getPath: PropTypes.func,
   horizontal: PropTypes.bool,
   pathComponent: PropTypes.element,
diff --git a/packages/victory-bar/src/index.d.ts b/packages/victory-bar/src/index.d.ts
index 002ab8945..0be29d39c 100644
--- a/packages/victory-bar/src/index.d.ts
+++ b/packages/victory-bar/src/index.d.ts
@@ -30,7 +30,6 @@ export interface VictoryBarProps
         bottomLeft?: NumberOrCallback;
         bottomRight?: NumberOrCallback;
       };
-  disableInlineStyles?: boolean;
   events?: EventPropTypeInterface<VictoryBarTTargetType, number | string | number[] | string[]>[];
   eventKey?: StringOrNumberOrCallback;
   horizontal?: boolean;
@@ -59,7 +58,6 @@ export interface BarProps extends VictoryCommonPrimitiveProps {
         bottomRight?: NumberOrCallback;
       };
   datum?: any;
-  disableInlineStyles?: boolean;
   getPath?: Function;
   horizontal?: boolean;
   pathComponent?: React.ReactElement;
diff --git a/packages/victory-bar/src/victory-bar.js b/packages/victory-bar/src/victory-bar.js
index 469731285..f72cd72ad 100644
--- a/packages/victory-bar/src/victory-bar.js
+++ b/packages/victory-bar/src/victory-bar.js
@@ -68,7 +68,6 @@ class VictoryBar extends React.Component {
         bottomRight: PropTypes.oneOfType([PropTypes.number, PropTypes.func])
       })
     ]),
-    disableInlineStyles: PropTypes.bool,
     getPath: PropTypes.func,
     horizontal: PropTypes.bool
   };
diff --git a/packages/victory-box-plot/src/helper-methods.js b/packages/victory-box-plot/src/helper-methods.js
index 84d9152d8..34751aafe 100644
--- a/packages/victory-box-plot/src/helper-methods.js
+++ b/packages/victory-box-plot/src/helper-methods.js
@@ -148,6 +148,9 @@ const getLabelStyle = (props, styleObject, namespace) => {
 };
 
 const getStyles = (props, styleObject) => {
+  if (props.disableInlineStyles) {
+    return {};
+  }
   const style = props.style || {};
   styleObject = styleObject || {};
   const parentStyles = { height: "100%", width: "100%" };
@@ -206,7 +209,16 @@ const getCalculatedValues = (props) => {
 
 // eslint-disable-next-line complexity
 const getWhiskerProps = (props, type) => {
-  const { horizontal, style, boxWidth, whiskerWidth, datum, scale, index } = props;
+  const {
+    horizontal,
+    style,
+    boxWidth,
+    whiskerWidth,
+    datum,
+    scale,
+    index,
+    disableInlineStyles
+  } = props;
   const { min, max, q1, q3, x, y } = props.positions;
   const boxValue = type === "min" ? q1 : q3;
   const whiskerValue = type === "min" ? min : max;
@@ -227,12 +239,13 @@ const getWhiskerProps = (props, type) => {
       x2: horizontal ? whiskerValue : x + width / 2,
       y2: horizontal ? y + width / 2 : whiskerValue
     },
-    style: style[type] || style.whisker
+    style: disableInlineStyles ? {} : style[type] || style.whisker,
+    disableInlineStyles
   };
 };
 
 const getBoxProps = (props, type) => {
-  const { horizontal, boxWidth, style, scale, datum, index } = props;
+  const { horizontal, boxWidth, style, scale, datum, index, disableInlineStyles } = props;
   const { median, q1, q3, x, y } = props.positions;
   const defaultX = type === "q1" ? q1 : median;
   const defaultY = type === "q1" ? median : q3;
@@ -246,12 +259,13 @@ const getBoxProps = (props, type) => {
     y: horizontal ? y - boxWidth / 2 : defaultY,
     width: horizontal ? defaultWidth : boxWidth,
     height: horizontal ? boxWidth : defaultHeight,
-    style: style[type] || style.boxes
+    style: disableInlineStyles ? {} : style[type] || style.boxes,
+    disableInlineStyles
   };
 };
 
 const getMedianProps = (props) => {
-  const { boxWidth, horizontal, style, datum, scale, index } = props;
+  const { boxWidth, horizontal, style, datum, scale, index, disableInlineStyles } = props;
   const { median, x, y } = props.positions;
   return {
     datum,
@@ -261,7 +275,8 @@ const getMedianProps = (props) => {
     y1: horizontal ? y - boxWidth / 2 : median,
     x2: horizontal ? median : x + boxWidth / 2,
     y2: horizontal ? y + boxWidth / 2 : median,
-    style: style.median
+    style: disableInlineStyles ? {} : style.median,
+    disableInlineStyles
   };
 };
 
@@ -282,7 +297,17 @@ const getOrientation = (labelOrientation, type) =>
   (typeof labelOrientation === "object" && labelOrientation[type]) || labelOrientation;
 
 const getLabelProps = (props, text, type) => {
-  const { datum, positions, index, boxWidth, horizontal, labelOrientation, style, theme } = props;
+  const {
+    datum,
+    positions,
+    index,
+    boxWidth,
+    horizontal,
+    labelOrientation,
+    style,
+    theme,
+    disableInlineStyles
+  } = props;
   const orientation = getOrientation(labelOrientation, type);
   const namespace = `${type}Labels`;
   const labelStyle = style[namespace] || style.labels;
@@ -304,7 +329,7 @@ const getLabelProps = (props, text, type) => {
     datum,
     index,
     orientation,
-    style: labelStyle,
+    style: disableInlineStyles ? {} : labelStyle,
     y: horizontal ? positions.y : positions[type],
     x: horizontal ? positions[type] : positions.x,
     dy: horizontal ? getOffset("y") : 0,
@@ -312,7 +337,8 @@ const getLabelProps = (props, text, type) => {
     textAnchor: labelStyle.textAnchor || defaultTextAnchors[orientation],
     verticalAnchor: labelStyle.verticalAnchor || defaultVerticalAnchors[orientation],
     angle: labelStyle.angle,
-    horizontal
+    horizontal,
+    disableInlineStyles
   };
 
   const component = props[`${type}LabelComponent`];
diff --git a/packages/victory-candlestick/src/helper-methods.js b/packages/victory-candlestick/src/helper-methods.js
index c7a0adab3..ac744994e 100644
--- a/packages/victory-candlestick/src/helper-methods.js
+++ b/packages/victory-candlestick/src/helper-methods.js
@@ -49,6 +49,9 @@ const getLabelStyle = (props, styleObject, namespace) => {
 };
 
 const getStyles = (props, style, defaultStyles = {}) => {
+  if (props.disableInlineStyles) {
+    return {};
+  }
   const width = "100%";
   const height = "100%";
 
@@ -155,6 +158,9 @@ const isTransparent = (attr) => {
 };
 
 const getDataStyles = (datum, style, props) => {
+  if (props.disableInlineStyles) {
+    return {};
+  }
   style = style || {};
   const candleColor =
     datum._open > datum._close ? props.candleColors.negative : props.candleColors.positive;
@@ -322,7 +328,8 @@ const getBaseProps = (props, fallbackProps) => {
     labels,
     events,
     sharedEvents,
-    horizontal
+    horizontal,
+    disableInlineStyles
   } = props;
   const initialChildProps = {
     parent: {
@@ -373,7 +380,8 @@ const getBaseProps = (props, fallbackProps) => {
       open,
       close,
       horizontal,
-      labelOrientation
+      labelOrientation,
+      disableInlineStyles
     };
     dataProps.candleWidth = getCandleWidth(dataProps);
     const extendedProps = defaults(Object.assign({}, dataProps), props);
diff --git a/packages/victory-core/src/index.d.ts b/packages/victory-core/src/index.d.ts
index 5874c2ef4..80e4a1bf2 100644
--- a/packages/victory-core/src/index.d.ts
+++ b/packages/victory-core/src/index.d.ts
@@ -171,6 +171,7 @@ export interface VictoryAxisCommonProps {
   axisLabelComponent?: React.ReactElement;
   axisValue?: number | string | object | Date;
   dependentAxis?: boolean;
+  disableInlineStyles?: boolean;
   gridComponent?: React.ReactElement;
   invertAxis?: boolean;
   style?: {
@@ -210,6 +211,7 @@ export interface VictoryLabelProps {
   data?: any[];
   desc?: string;
   direction?: string;
+  disableInlineStyles?: boolean;
   events?: React.DOMAttributes<any>;
   groupComponent?: React.ReactElement;
   id?: StringOrNumberOrCallback;
@@ -679,6 +681,7 @@ export interface VictoryCommonPrimitiveProps {
   clipPath?: string;
   data?: any;
   desc?: string | Function;
+  disableInlineStyles?: boolean;
   events?: object;
   id?: number | string | Function;
   index?: number | string;
diff --git a/packages/victory-core/src/victory-label/victory-label.js b/packages/victory-core/src/victory-label/victory-label.js
index 40206cff3..749620709 100644
--- a/packages/victory-core/src/victory-label/victory-label.js
+++ b/packages/victory-core/src/victory-label/victory-label.js
@@ -60,7 +60,11 @@ const useMultiLineBackgrounds = (props) => {
 
 const getStyles = (style, props) => {
   if (props.disableInlineStyles) {
-    return {};
+    const baseStyles = Helpers.evaluateStyle(style, props);
+    return {
+      // Font size is necessary to calculate the y position of the label
+      fontSize: getFontSize(baseStyles)
+    };
   }
   const getSingleStyle = (s) => {
     s = s ? defaults({}, s, defaultStyles) : defaultStyles;
diff --git a/packages/victory-core/src/victory-util/common-props.js b/packages/victory-core/src/victory-util/common-props.js
index 6f9a4ada8..776787d8d 100644
--- a/packages/victory-core/src/victory-util/common-props.js
+++ b/packages/victory-core/src/victory-util/common-props.js
@@ -11,6 +11,7 @@ const dataProps = {
   ]),
   data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   dataComponent: PropTypes.element,
+  disableInlineStyles: PropTypes.bool,
   labelComponent: PropTypes.element,
   labels: PropTypes.oneOfType([PropTypes.func, PropTypes.array]),
   samples: CustomPropTypes.nonNegative,
@@ -151,6 +152,7 @@ const primitiveProps = {
   clipPath: PropTypes.string,
   data: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
   desc: PropTypes.oneOfType([PropTypes.string, PropTypes.func]),
+  disableInlineStyles: PropTypes.bool,
   events: PropTypes.object,
   id: PropTypes.oneOfType([PropTypes.number, PropTypes.string, PropTypes.func]),
   index: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
diff --git a/packages/victory-core/src/victory-util/helpers.js b/packages/victory-core/src/victory-util/helpers.js
index 6284aa41a..eaf9e464c 100644
--- a/packages/victory-core/src/victory-util/helpers.js
+++ b/packages/victory-core/src/victory-util/helpers.js
@@ -128,6 +128,9 @@ function evaluateProp(prop, props) {
 }
 
 function evaluateStyle(style, props) {
+  if (props.disableInlineStyles) {
+    return {};
+  }
   if (!style || !keys(style).some((value) => isFunction(style[value]))) {
     return style;
   }
diff --git a/packages/victory-errorbar/src/helper-methods.js b/packages/victory-errorbar/src/helper-methods.js
index cd370b39e..3d1117c0c 100644
--- a/packages/victory-errorbar/src/helper-methods.js
+++ b/packages/victory-errorbar/src/helper-methods.js
@@ -105,7 +105,18 @@ const getCalculatedValues = (props) => {
 };
 
 const getLabelProps = (dataProps, text, style) => {
-  const { x, y, index, scale, errorY, errorX, horizontal, labelComponent, theme } = dataProps;
+  const {
+    x,
+    y,
+    index,
+    scale,
+    errorY,
+    errorX,
+    horizontal,
+    labelComponent,
+    theme,
+    disableInlineStyles
+  } = dataProps;
   const getError = (type = "x") => {
     const baseError = type === "y" ? errorY : errorX;
     const error = baseError && Array.isArray(baseError) ? baseError[0] : baseError;
@@ -129,7 +140,8 @@ const getLabelProps = (dataProps, text, style) => {
     textAnchor: labelStyle.textAnchor || textAnchor,
     verticalAnchor: labelStyle.verticalAnchor || verticalAnchor,
     angle: labelStyle.angle,
-    horizontal
+    horizontal,
+    disableInlineStyles
   };
 
   if (!Helpers.isTooltip(labelComponent)) {
@@ -160,7 +172,8 @@ const getBaseProps = (props, fallbackProps) => {
     standalone,
     style,
     theme,
-    width
+    width,
+    disableInlineStyles
   } = props;
   const initialChildProps = {
     parent: {
@@ -196,9 +209,10 @@ const getBaseProps = (props, fallbackProps) => {
       horizontal,
       index,
       scale,
-      style: style.data,
+      style: disableInlineStyles ? {} : style.data,
       x,
-      y
+      y,
+      disableInlineStyles
     };
 
     childProps[eventKey] = {
diff --git a/packages/victory-histogram/src/helper-methods.js b/packages/victory-histogram/src/helper-methods.js
index ac6e7580d..1aa27ab9e 100644
--- a/packages/victory-histogram/src/helper-methods.js
+++ b/packages/victory-histogram/src/helper-methods.js
@@ -176,7 +176,8 @@ const getBaseProps = (props, fallbackProps) => {
     width,
     labels,
     name,
-    getPath
+    getPath,
+    disableInlineStyles
   } = props;
   const initialChildProps = {
     parent: {
@@ -223,14 +224,15 @@ const getBaseProps = (props, fallbackProps) => {
       horizontal,
       index,
       scale,
-      style: style.data,
+      style: disableInlineStyles ? {} : style.data,
       width,
       height,
       x,
       y,
       y0,
       x0,
-      getPath
+      getPath,
+      disableInlineStyles
     };
 
     childProps[eventKey] = {
diff --git a/packages/victory-line/src/helper-methods.js b/packages/victory-line/src/helper-methods.js
index e9a729213..085d17222 100644
--- a/packages/victory-line/src/helper-methods.js
+++ b/packages/victory-line/src/helper-methods.js
@@ -52,7 +52,8 @@ const getBaseProps = (props, fallbackProps) => {
     theme,
     width,
     labels,
-    name
+    name,
+    disableInlineStyles
   } = props;
   const initialChildProps = {
     parent: {
@@ -78,8 +79,9 @@ const getBaseProps = (props, fallbackProps) => {
         data,
         interpolation,
         groupComponent,
-        style: style.data,
-        theme
+        style: disableInlineStyles ? {} : style.data,
+        theme,
+        disableInlineStyles
       }
     }
   };
diff --git a/packages/victory-pie/src/helper-methods.js b/packages/victory-pie/src/helper-methods.js
index 1339886b2..314ab5354 100644
--- a/packages/victory-pie/src/helper-methods.js
+++ b/packages/victory-pie/src/helper-methods.js
@@ -232,7 +232,8 @@ export const getBaseProps = (props, fallbackProps) => {
     name,
     innerRadius,
     cornerRadius,
-    padAngle
+    padAngle,
+    disableInlineStyles
   } = calculatedValues;
   const radius = props.radius || defaultRadius;
   const initialChildProps = {
@@ -256,7 +257,8 @@ export const getBaseProps = (props, fallbackProps) => {
       radius,
       cornerRadius,
       padAngle,
-      style: getSliceStyle(index, calculatedValues)
+      style: disableInlineStyles ? {} : getSliceStyle(index, calculatedValues),
+      disableInlineStyles
     };
     childProps[eventKey] = {
       data: dataProps
diff --git a/packages/victory-pie/src/victory-pie.js b/packages/victory-pie/src/victory-pie.js
index a9e26256d..53e8b1ff9 100644
--- a/packages/victory-pie/src/victory-pie.js
+++ b/packages/victory-pie/src/victory-pie.js
@@ -89,6 +89,7 @@ class VictoryPie extends React.Component {
     cornerRadius: PropTypes.oneOfType([CustomPropTypes.nonNegative, PropTypes.func]),
     data: PropTypes.array,
     dataComponent: PropTypes.element,
+    disableInlineStyes: PropTypes.bool,
     endAngle: PropTypes.number,
     eventKey: PropTypes.oneOfType([
       PropTypes.func,
diff --git a/packages/victory-polar-axis/src/helper-methods.js b/packages/victory-polar-axis/src/helper-methods.js
index d40709433..5283a6a6e 100644
--- a/packages/victory-polar-axis/src/helper-methods.js
+++ b/packages/victory-polar-axis/src/helper-methods.js
@@ -82,6 +82,9 @@ const getScale = (props) => {
 };
 
 const getStyles = (props, styleObject) => {
+  if (props.disableInlineStyles) {
+    return {};
+  }
   const style = props.style || {};
   styleObject = styleObject || {};
   const parentStyleProps = { height: "auto", width: "100%" };
diff --git a/packages/victory-polar-axis/src/victory-polar-axis.js b/packages/victory-polar-axis/src/victory-polar-axis.js
index 3f876d748..45657527d 100644
--- a/packages/victory-polar-axis/src/victory-polar-axis.js
+++ b/packages/victory-polar-axis/src/victory-polar-axis.js
@@ -73,6 +73,7 @@ class VictoryPolarAxis extends React.Component {
     circularGridComponent: PropTypes.element,
     containerComponent: PropTypes.element,
     dependentAxis: PropTypes.bool,
+    disableInlineStyles: PropTypes.bool,
     endAngle: PropTypes.number,
     events: PropTypes.arrayOf(
       PropTypes.shape({
diff --git a/packages/victory-scatter/src/helper-methods.js b/packages/victory-scatter/src/helper-methods.js
index 95a2cab75..276945b72 100644
--- a/packages/victory-scatter/src/helper-methods.js
+++ b/packages/victory-scatter/src/helper-methods.js
@@ -90,7 +90,8 @@ const getBaseProps = (props, fallbackProps) => {
     theme,
     width,
     labels,
-    horizontal
+    horizontal,
+    disableInlineStyles
   } = props;
   const initialChildProps = {
     parent: {
@@ -125,7 +126,8 @@ const getBaseProps = (props, fallbackProps) => {
       horizontal,
       size: getSize(datum, props),
       symbol: getSymbol(datum, props),
-      style: style.data
+      style: disableInlineStyles ? {} : style.data,
+      disableInlineStyles
     };
 
     childProps[eventKey] = { data: dataProps };
diff --git a/stories/victory-area.stories.js b/stories/victory-area.stories.js
index 36e8fa2af..1b51daa88 100644
--- a/stories/victory-area.stories.js
+++ b/stories/victory-area.stories.js
@@ -8,6 +8,8 @@ import { VictoryTheme, VictoryLabel } from "../packages/victory-core/src";
 import { VictoryChart } from "../packages/victory-chart/src";
 import { getData, getMixedData, getTimeData, getLogData, getDataWithBaseline } from "./data";
 import { fromJS } from "immutable";
+import Area from "../packages/victory-area/src/area";
+import styled from "styled-components";
 
 const containerStyle = {
   display: "flex",
@@ -453,3 +455,16 @@ export const Polar = () => {
     </div>
   );
 };
+
+const StyledArea = styled(Area)`
+  fill: pink;
+`;
+
+export const DisableInlineStyles = () => {
+  return (
+    <div style={containerStyle}>
+      <VictoryArea {...defaultChartProps} disableInlineStyles />
+      <VictoryArea {...defaultChartProps} dataComponent={<StyledArea disableInlineStyles />} />
+    </div>
+  );
+};
diff --git a/stories/victory-bar.stories.js b/stories/victory-bar.stories.js
index 07c558b00..9eeb850e6 100644
--- a/stories/victory-bar.stories.js
+++ b/stories/victory-bar.stories.js
@@ -17,6 +17,7 @@ import {
   getDataWithBaseline
 } from "./data";
 import { fromJS } from "immutable";
+import styled from "styled-components";
 
 const containerStyle = {
   display: "flex",
@@ -937,14 +938,18 @@ export const Domain = () => {
   );
 };
 
+const StyledBar = styled(Bar)`
+  fill: purple;
+`;
+
 export const DisableInlineStyles = () => {
   return (
     <div style={containerStyle}>
-      <VictoryChart>
+      <VictoryChart style={parentStyle}>
         <VictoryBar disableInlineStyles />
       </VictoryChart>
-      <VictoryChart>
-        <VictoryBar dataComponent={<Bar disableInlineStyles />} />
+      <VictoryChart style={parentStyle}>
+        <VictoryBar dataComponent={<StyledBar disableInlineStyles />} />
       </VictoryChart>
     </div>
   );
diff --git a/stories/victory-box-plot.stories.js b/stories/victory-box-plot.stories.js
index 3b3c29109..d90557d72 100644
--- a/stories/victory-box-plot.stories.js
+++ b/stories/victory-box-plot.stories.js
@@ -4,10 +4,11 @@ import React from "react";
 import { VictoryBoxPlot } from "../packages/victory-box-plot/src/index";
 import { VictoryChart } from "../packages/victory-chart/src/index";
 import { VictoryTooltip } from "../packages/victory-tooltip/src/index";
-import { VictoryTheme } from "../packages/victory-core/src/index";
+import { VictoryTheme, Box, Whisker, LineSegment } from "../packages/victory-core/src/index";
 import { range } from "lodash";
 import seedrandom from "seedrandom";
 import { getArrayData } from "./data";
+import styled from "styled-components";
 
 const getRepeatData = (num, samples) => {
   const seed = "getRepeatData";
@@ -321,3 +322,35 @@ export const Domain = () => {
     </div>
   );
 };
+
+const StyledBox = styled(Box)`
+  fill: blueviolet;
+`;
+
+const StyledWhisker = styled(Whisker)`
+  stroke: aqua;
+`;
+
+const StyledLineSegment = styled(LineSegment)`
+  stroke: lavender;
+`;
+
+export const DisableInlineStyles = () => {
+  return (
+    <div style={containerStyle}>
+      <VictoryChart style={parentStyle}>
+        <VictoryBoxPlot disableInlineStyles data={getData(8)} />
+      </VictoryChart>
+      <VictoryChart style={parentStyle}>
+        <VictoryBoxPlot
+          data={getData(8)}
+          q1Component={<StyledBox disableInlineStyles />}
+          q3Component={<StyledBox disableInlineStyles />}
+          maxComponent={<StyledWhisker disableInlineStyles />}
+          minComponent={<StyledWhisker disableInlineStyles />}
+          medianComponent={<StyledLineSegment disableInlineStyles />}
+        />
+      </VictoryChart>
+    </div>
+  );
+};
diff --git a/stories/victory-candlestick.stories.js b/stories/victory-candlestick.stories.js
index cbd84abfc..67a21284b 100644
--- a/stories/victory-candlestick.stories.js
+++ b/stories/victory-candlestick.stories.js
@@ -1,13 +1,14 @@
 /*eslint-disable no-magic-numbers*/
 /*eslint-disable react/no-multi-comp*/
 import React from "react";
-import { VictoryCandlestick } from "../packages/victory-candlestick/src/index";
+import { VictoryCandlestick, Candle } from "../packages/victory-candlestick/src/index";
 import { VictoryChart } from "../packages/victory-chart/src/index";
 import { VictoryTooltip } from "../packages/victory-tooltip/src/index";
 import { VictoryTheme } from "../packages/victory-core/src/index";
 import { range } from "lodash";
 import seedrandom from "seedrandom";
 import { fromJS } from "immutable";
+import styled from "styled-components";
 
 const sampleData = [
   { x: 1, open: 9, close: 30, high: 56, low: 7 },
@@ -371,3 +372,24 @@ export const Domain = () => {
     </div>
   );
 };
+
+const StyledCandle = styled(Candle)`
+  fill: lightblue;
+  stroke: magenta;
+`;
+
+export const DisableInlineStyles = () => {
+  return (
+    <div style={containerStyle}>
+      <VictoryChart style={parentStyle}>
+        <VictoryCandlestick disableInlineStyles data={getData(8)} />
+      </VictoryChart>
+      <VictoryChart style={parentStyle}>
+        <VictoryCandlestick
+          data={getData(8)}
+          dataComponent={<StyledCandle disableInlineStyles />}
+        />
+      </VictoryChart>
+    </div>
+  );
+};
diff --git a/stories/victory-errorbar.stories.js b/stories/victory-errorbar.stories.js
index c36faa40c..aef825b42 100644
--- a/stories/victory-errorbar.stories.js
+++ b/stories/victory-errorbar.stories.js
@@ -1,13 +1,14 @@
 /*eslint-disable no-magic-numbers*/
 /*eslint-disable react/no-multi-comp*/
 import React from "react";
-import { VictoryErrorBar } from "../packages/victory-errorbar/src/index";
+import { VictoryErrorBar, ErrorBar } from "../packages/victory-errorbar/src/index";
 import { VictoryChart } from "../packages/victory-chart/src/index";
 import { VictoryTooltip } from "../packages/victory-tooltip/src/index";
 import { VictoryTheme } from "../packages/victory-core/src/index";
 import { range } from "lodash";
 import seedrandom from "seedrandom";
 import { fromJS } from "immutable";
+import styled from "styled-components";
 
 const getData = (num, symmetric, seed) => {
   seed = seed || "getData";
@@ -259,3 +260,20 @@ export const Domain = () => {
     </div>
   );
 };
+
+const StyledErrorBar = styled(ErrorBar)`
+  stroke: deeppink;
+`;
+
+export const DisableInlineStyles = () => {
+  return (
+    <div style={containerStyle}>
+      <VictoryChart style={parentStyle}>
+        <VictoryErrorBar data={getData(4)} disableInlineStyles />
+      </VictoryChart>
+      <VictoryChart style={parentStyle}>
+        <VictoryErrorBar data={getData(4)} dataComponent={<StyledErrorBar disableInlineStyles />} />
+      </VictoryChart>
+    </div>
+  );
+};
diff --git a/stories/victory-histogram.stories.js b/stories/victory-histogram.stories.js
index 88fda0d09..be0c8d43d 100644
--- a/stories/victory-histogram.stories.js
+++ b/stories/victory-histogram.stories.js
@@ -10,10 +10,12 @@ import { VictoryStack } from "../packages/victory-stack/src";
 import { VictoryTheme } from "../packages/victory-core/src";
 import { getData } from "./data";
 import { data, timeData } from "./victory-histogram-data";
+import { Bar } from "../packages/victory-bar/src";
 
 import * as d3Array from "d3-array";
 import * as d3Scale from "d3-scale";
 import * as d3Time from "d3-time";
+import styled from "styled-components";
 
 const containerStyle = {
   display: "flex",
@@ -497,3 +499,21 @@ export const Domain = () => {
     </div>
   );
 };
+
+const StyledBar = styled(Bar)`
+  stroke: black;
+  fill: teal;
+`;
+
+export const DisableInlineStyles = () => {
+  return (
+    <div style={containerStyle}>
+      <VictoryChart style={parentStyle}>
+        <VictoryHistogram data={data} disableInlineStyles />
+      </VictoryChart>
+      <VictoryChart style={parentStyle}>
+        <VictoryHistogram data={data} dataComponent={<StyledBar disableInlineStyles />} />
+      </VictoryChart>
+    </div>
+  );
+};
diff --git a/stories/victory-line.stories.js b/stories/victory-line.stories.js
index 0dd222075..8ce079368 100644
--- a/stories/victory-line.stories.js
+++ b/stories/victory-line.stories.js
@@ -2,12 +2,13 @@
 /*eslint-disable react/no-multi-comp*/
 import React from "react";
 import { VictoryStack } from "../packages/victory-stack/src/index";
-import { VictoryLine } from "../packages/victory-line/src/index";
+import { VictoryLine, Curve } from "../packages/victory-line/src/index";
 import { VictoryChart } from "../packages/victory-chart/src/index";
 import { VictoryTooltip } from "../packages/victory-tooltip/src/index";
 import { VictoryTheme, VictoryLabel } from "../packages/victory-core/src/index";
 import { getData, getMixedData, getTimeData, getLogData } from "./data";
 import { fromJS } from "immutable";
+import styled from "styled-components";
 
 const containerStyle = {
   display: "flex",
@@ -455,3 +456,21 @@ export const Polar = () => {
     </div>
   );
 };
+
+const StyledCurve = styled(Curve)`
+  stroke: purple;
+  stroke-width: 10px;
+`;
+
+export const DisableInlineStyles = () => {
+  return (
+    <div style={containerStyle}>
+      <VictoryChart {...defaultChartProps}>
+        <VictoryLine disableInlineStyles />
+      </VictoryChart>
+      <VictoryChart {...defaultChartProps}>
+        <VictoryLine dataComponent={<StyledCurve disableInlineStyles />} />
+      </VictoryChart>
+    </div>
+  );
+};
diff --git a/stories/victory-pie.stories.js b/stories/victory-pie.stories.js
index 76631620a..8bb9181f2 100644
--- a/stories/victory-pie.stories.js
+++ b/stories/victory-pie.stories.js
@@ -6,6 +6,7 @@ import { VictoryPie, Slice } from "../packages/victory-pie/src/index";
 import { VictoryTooltip } from "../packages/victory-tooltip/src/index";
 import { VictoryTheme, Helpers } from "../packages/victory-core/src/index";
 import { fromJS } from "immutable";
+import styled from "styled-components";
 
 const containerStyle = {
   display: "flex",
@@ -544,3 +545,16 @@ export const LabelPlacement = () => {
     </div>
   );
 };
+
+const StyledSlice = styled(Slice)`
+  fill: pink;
+`;
+
+export const DisableInlineStyles = () => {
+  return (
+    <div style={containerStyle}>
+      <VictoryPie disableInlineStyles style={parentStyle} />
+      <VictoryPie style={parentStyle} dataComponent={<StyledSlice disableInlineStyles />} />
+    </div>
+  );
+};
diff --git a/stories/victory-scatter.stories.js b/stories/victory-scatter.stories.js
index 71bd5d99a..62966350b 100644
--- a/stories/victory-scatter.stories.js
+++ b/stories/victory-scatter.stories.js
@@ -6,9 +6,10 @@ import { VictoryStack } from "../packages/victory-stack/src/index";
 import { VictoryScatter } from "../packages/victory-scatter/src/index";
 import { VictoryChart } from "../packages/victory-chart/src/index";
 import { VictoryTooltip } from "../packages/victory-tooltip/src/index";
-import { VictoryTheme } from "../packages/victory-core/src/index";
+import { VictoryTheme, Point } from "../packages/victory-core/src/index";
 import { getData, getMixedData, getTimeData, getLogData } from "./data";
 import { fromJS } from "immutable";
+import styled from "styled-components";
 
 const SYMBOLS = [
   "circle",
@@ -509,3 +510,20 @@ export const Domain = () => {
     </div>
   );
 };
+
+const StyledPoint = styled(Point)`
+  fill: darkmagenta;
+`;
+
+export const DisableInlineStyles = () => {
+  return (
+    <div style={containerStyle}>
+      <VictoryChart style={parentStyle}>
+        <VictoryScatter disableInlineStyles />
+      </VictoryChart>
+      <VictoryChart style={parentStyle}>
+        <VictoryScatter dataComponent={<StyledPoint disableInlineStyles />} />
+      </VictoryChart>
+    </div>
+  );
+};
diff --git a/stories/victory-tooltip.stories.js b/stories/victory-tooltip.stories.js
index 61ed12e12..fc9eb97f4 100644
--- a/stories/victory-tooltip.stories.js
+++ b/stories/victory-tooltip.stories.js
@@ -2,8 +2,10 @@
 /*eslint-disable react/no-multi-comp*/
 import React from "react";
 import { VictoryBar } from "../packages/victory-bar/src/index";
-import { VictoryTooltip } from "../packages/victory-tooltip/src/index";
+import { VictoryTooltip, Flyout } from "../packages/victory-tooltip/src/index";
+import { VictoryLabel } from "victory-core/src";
 import { getData, getMixedData } from "./data";
+import styled from "styled-components";
 
 const containerStyle = {
   display: "flex",
@@ -681,3 +683,32 @@ export const FlyoutPadding = () => {
     </div>
   );
 };
+
+const StyledFlyout = styled(Flyout)`
+  fill: aquamarine;
+`;
+
+const StyledLabel = styled(VictoryLabel)`
+  fill: blue;
+`;
+
+export const DisableInlineStyles = () => {
+  return (
+    <div style={containerStyle}>
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={<VictoryTooltip active disableInlineStyles />}
+      />
+      <VictoryBar
+        {...defaultBarProps}
+        labelComponent={
+          <VictoryTooltip
+            active
+            flyoutComponent={<StyledFlyout disableInlineStyles />}
+            labelComponent={<StyledLabel disableInlineStyles />}
+          />
+        }
+      />
+    </div>
+  );
+};
diff --git a/test/client/spec/victory-core/victory-util/helpers.spec.js b/test/client/spec/victory-core/victory-util/helpers.spec.js
index 17061553b..28cb2db1a 100644
--- a/test/client/spec/victory-core/victory-util/helpers.spec.js
+++ b/test/client/spec/victory-core/victory-util/helpers.spec.js
@@ -78,6 +78,15 @@ describe("victory-util/helpers", () => {
       };
       expect(Helpers.evaluateStyle(style, data)).to.deep.equal({ color: "red", size: 5 });
     });
+    it("returns no styles if disableInlineStyles is true", () => {
+      const style = {
+        color: "blue"
+      };
+      const props = {
+        disableInlineStyles: true
+      };
+      expect(Helpers.evaluateStyle(style, props)).to.deep.equal({});
+    });
   });
 
   describe("getRange", () => {