diff --git a/packages/draft-js-export-html/README.md b/packages/draft-js-export-html/README.md
index eff79605..289c4e0c 100644
--- a/packages/draft-js-export-html/README.md
+++ b/packages/draft-js-export-html/README.md
@@ -42,7 +42,7 @@ let options = {
 };
 let html = stateToHTML(contentState, options);
 ```
-### `inlineStylesFn`
+### `inlineStyleFn`
 
 You can define custom function to return rendering options based on inline styles. Similar to draft.js [customStyleFn](https://draftjs.org/docs/api-reference-editor.html#customstylefn).
 
diff --git a/packages/draft-js-export-html/src/__tests__/stateToHTML-test.js b/packages/draft-js-export-html/src/__tests__/stateToHTML-test.js
index 36fb0ac3..75963545 100644
--- a/packages/draft-js-export-html/src/__tests__/stateToHTML-test.js
+++ b/packages/draft-js-export-html/src/__tests__/stateToHTML-test.js
@@ -112,15 +112,14 @@ describe('stateToHTML', () => {
 
   it('should support inline style function', () => {
     let options = {
-      inlineStyleFn: (styles) => {
+      inlineStyleFn: (style) => {
         let key = 'color-';
-        let color = styles.filter((value) => value.startsWith(key)).first();
 
-        if (color) {
+        if (style.startsWith(key)) {
           return {
             element: 'span',
             style: {
-              color: color.replace(key, ''),
+              color: style.replace(key, ''),
             },
           };
         }
diff --git a/packages/draft-js-export-html/src/stateToHTML.js b/packages/draft-js-export-html/src/stateToHTML.js
index d90b7fac..01b09271 100644
--- a/packages/draft-js-export-html/src/stateToHTML.js
+++ b/packages/draft-js-export-html/src/stateToHTML.js
@@ -18,7 +18,6 @@ import type {
   EntityInstance,
 } from 'draft-js';
 import type {CharacterMetaList} from 'draft-js-utils';
-import type {DraftInlineStyle} from 'draft-js/lib/DraftInlineStyle';
 
 type AttrMap = {[key: string]: string};
 type Attributes = {[key: string]: string};
@@ -37,7 +36,7 @@ type StyleMap = {[styleName: string]: RenderConfig};
 
 type BlockStyleFn = (block: ContentBlock) => ?RenderConfig;
 type EntityStyleFn = (entity: Entity) => ?RenderConfig;
-type InlineStyleFn = (style: DraftInlineStyle) => ?RenderConfig;
+type InlineStyleFn = (style: string) => ?RenderConfig;
 
 type Options = {
   inlineStyles?: StyleMap;
@@ -344,18 +343,23 @@ class MarkupGenerator {
       return content;
     }
 
-    const renderConfig = this.inlineStyleFn(styleSet);
-    if (!renderConfig) {
-      return content;
-    }
+    const inlineStyleFn = this.inlineStyleFn;
+
+    return styleSet.reduce((nextContent, styleItem) => {
+      const renderConfig = inlineStyleFn(styleItem);
+
+      if (!renderConfig) {
+        return nextContent;
+      }
 
-    const {element = 'span', attributes, style} = renderConfig;
-    const attrString = stringifyAttrs({
-      ...attributes,
-      style: style && styleToCSS(style),
-    });
+      const {element = 'span', attributes, style} = renderConfig;
+      const attrString = stringifyAttrs({
+        ...attributes,
+        style: style && styleToCSS(style),
+      });
 
-    return `<${element}${attrString}>${content}</${element}>`;
+      return `<${element}${attrString}>${nextContent}</${element}>`;
+    }, content);
   }
 
   renderBlockContent(block: ContentBlock): string {