diff --git a/build/index.js b/build/index.js
index ae8b00e..535d500 100644
--- a/build/index.js
+++ b/build/index.js
@@ -15,10 +15,6 @@ var _lodash = require('lodash.camelcase');
 
 var _lodash2 = _interopRequireDefault(_lodash);
 
-var _lodash3 = require('lodash.snakecase');
-
-var _lodash4 = _interopRequireDefault(_lodash3);
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -198,7 +194,7 @@ var currentStyle = function currentStyle(prefix) {
 var createCustomStyles = exports.createCustomStyles = function createCustomStyles(prefix, conf) {
   return conf.reduce(function (acc, prop) {
     var camelCased = (0, _lodash2.default)(prop);
-    var newPrefix = '' + prefix + (0, _lodash4.default)(prop).toUpperCase() + '_';
+    var newPrefix = '' + prefix + camelCased + '_';
     var copy = _extends({}, acc);
     copy[camelCased] = {
       add: addStyle(newPrefix),
@@ -250,7 +246,7 @@ var createInlineStyleExportObject = exports.createInlineStyleExportObject = func
       }));
     }
 
-    var regex = new RegExp(prefix + '(.+)_(.+)');
+    var regex = new RegExp(prefix + '([^_]+)_(.+)');
     var match = style.match(regex);
 
     // no matches
@@ -259,10 +255,10 @@ var createInlineStyleExportObject = exports.createInlineStyleExportObject = func
     }
 
     // custom styles
-    var css = match[1].toLowerCase();
+    var css = match[1];
     var value = match[2];
     var inlineStyle = _defineProperty({}, style, {
-      style: _defineProperty({}, (0, _lodash2.default)(css), value)
+      style: _defineProperty({}, css, value)
     });
 
     return Object.assign({}, acc, inlineStyle);
diff --git a/src/index.js b/src/index.js
index 6ec66da..7ab8932 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,7 +1,6 @@
 import { EditorState, Modifier, convertToRaw, DefaultDraftInlineStyle } from 'draft-js';
 import { Map } from 'immutable';
 import camelCase from 'lodash.camelcase';
-import snakeCase from 'lodash.snakecase';
 
 const DEFAULT_PREFIX = 'CUSTOM_';
 
@@ -161,7 +160,7 @@ const currentStyle = prefix => editorState => {
 export const createCustomStyles = (prefix, conf) => {
   return conf.reduce((acc, prop) => {
     const camelCased = camelCase(prop);
-    const newPrefix = `${prefix}${snakeCase(prop).toUpperCase()}_`;
+    const newPrefix = `${prefix}${camelCased}_`;
     const copy = { ...acc };
     copy[camelCased] = {
       add: addStyle(newPrefix),
@@ -212,7 +211,7 @@ export const createInlineStyleExportObject = (prefix, customStyleMap) => (acc, s
     });
   }
 
-  const regex = new RegExp(`${prefix}(.+)_(.+)`);
+  const regex = new RegExp(`${prefix}([^_]+)_(.+)`);
   const match = style.match(regex);
 
   // no matches
@@ -221,12 +220,12 @@ export const createInlineStyleExportObject = (prefix, customStyleMap) => (acc, s
   }
 
   // custom styles
-  const css = match[1].toLowerCase();
+  const css = match[1];
   const value = match[2];
   const inlineStyle = {
     [style]: {
       style: {
-        [camelCase(css)]: value,
+        [css]: value,
       },
     },
   };
diff --git a/tests/index.spec.js b/tests/index.spec.js
index cae0825..37bf2cf 100644
--- a/tests/index.spec.js
+++ b/tests/index.spec.js
@@ -52,7 +52,7 @@ describe('add()', () => {
     const inlineStyleRanges = blockInlineStyleRanges(newEditorState, 0);
     expect(inlineStyleRanges).to.deep.equal([
       {
-        style: 'CUSTOM_COLOR_red',
+        style: 'CUSTOM_color_red',
         length: 5,
         offset: 0,
       }]);
@@ -68,7 +68,7 @@ describe('add()', () => {
     const inlineStyleRanges = blockInlineStyleRanges(newEditorState2, 0);
     expect(inlineStyleRanges).to.deep.equal([
       {
-        style: 'CUSTOM_COLOR_green',
+        style: 'CUSTOM_color_green',
         length: 5,
         offset: 0,
       }]);
@@ -80,7 +80,7 @@ describe('add()', () => {
       .toEditorState();
     const newEditorState = styles.color.add(editorState, 'red');
     const override = newEditorState.getInlineStyleOverride();
-    expect(override.toJS()).to.deep.equal(OrderedSet(['CUSTOM_COLOR_red']).toJS());
+    expect(override.toJS()).to.deep.equal(OrderedSet(['CUSTOM_color_red']).toJS());
   });
   it('should add a 2 of the same prefixed styles to the same collapsed selection and show only the latest style', () => {
     const editorState = new Raw()
@@ -90,7 +90,7 @@ describe('add()', () => {
     const newEditorState = styles.color.add(editorState, 'red');
     const newEditorState2 = styles.color.add(newEditorState, 'blue');
     const override = newEditorState2.getInlineStyleOverride();
-    expect(override.toJS()).to.deep.equal(OrderedSet(['CUSTOM_COLOR_blue']).toJS());
+    expect(override.toJS()).to.deep.equal(OrderedSet(['CUSTOM_color_blue']).toJS());
   });
   it('should add 2 of the different prefixed styles to the same collapsed selection and show both', () => {
     const editorState = new Raw()
@@ -100,7 +100,7 @@ describe('add()', () => {
     const newEditorState = styles.color.add(editorState, 'red');
     const newEditorState2 = styles.fontSize.add(newEditorState, '12px');
     const override = newEditorState2.getInlineStyleOverride();
-    expect(override.toJS()).to.deep.equal(OrderedSet(['CUSTOM_COLOR_red', 'CUSTOM_FONT_SIZE_12px']).toJS());
+    expect(override.toJS()).to.deep.equal(OrderedSet(['CUSTOM_color_red', 'CUSTOM_fontSize_12px']).toJS());
   });
   it('should add 2 different colors and undo redo them one by one', () => {
     const editorState = new Raw()
@@ -113,7 +113,7 @@ describe('add()', () => {
     const inlineStyleRanges = blockInlineStyleRanges(newEditorState2, 0);
     expect(inlineStyleRanges).to.deep.equal([
       {
-        style: 'CUSTOM_COLOR_green',
+        style: 'CUSTOM_color_green',
         length: 5,
         offset: 0,
       }]);
@@ -121,7 +121,7 @@ describe('add()', () => {
     const newEditorState3 = EditorState.undo(newEditorState2);
     expect(blockInlineStyleRanges(newEditorState3, 0)).to.deep.equal([
       {
-        style: 'CUSTOM_COLOR_red',
+        style: 'CUSTOM_color_red',
         length: 5,
         offset: 0,
       }]);
@@ -129,7 +129,7 @@ describe('add()', () => {
     const newEditorState4 = EditorState.redo(newEditorState3);
     expect(blockInlineStyleRanges(newEditorState4, 0)).to.deep.equal([
       {
-        style: 'CUSTOM_COLOR_green',
+        style: 'CUSTOM_color_green',
         length: 5,
         offset: 0,
       }]);
@@ -168,7 +168,7 @@ describe('toggle()', () => {
     // Add styles
     expect(addedInlineStyleRanges).to.deep.equal([
       {
-        style: 'CUSTOM_COLOR_red',
+        style: 'CUSTOM_color_red',
         length: 5,
         offset: 0,
       }]);
@@ -188,7 +188,7 @@ describe('toggle()', () => {
     const inlineStyleRanges = blockInlineStyleRanges(newEditorState, 0);
     const inlineStyleOverride = newEditorState.getInlineStyleOverride();
     expect(inlineStyleRanges).to.deep.equal([]);
-    expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_COLOR_red']);
+    expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_color_red']);
   });
   it('should add and remove inlineStyleOverride to collapsed selection', () => {
     const editorState = new Raw()
@@ -214,7 +214,7 @@ describe('toggle()', () => {
     const inlineStyleRanges = blockInlineStyleRanges(newEditorState2, 0);
     const inlineStyleOverride = newEditorState2.getInlineStyleOverride();
     expect(inlineStyleRanges).to.deep.equal([]);
-    expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_COLOR_blue']);
+    expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_color_blue']);
   });
   it('should add 3 color styles, only blue should be set as inlineStyleOverride', () => {
     const editorState = new Raw()
@@ -228,7 +228,7 @@ describe('toggle()', () => {
     const inlineStyleRanges = blockInlineStyleRanges(newEditorState3, 0);
     const inlineStyleOverride = newEditorState3.getInlineStyleOverride();
     expect(inlineStyleRanges).to.deep.equal([]);
-    expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_COLOR_blue']);
+    expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_color_blue']);
   });
   it('should add 2 different styles, only color blue and font-size 12px should be set as inlineStyleOverride', () => {
     const editorState = new Raw()
@@ -243,7 +243,7 @@ describe('toggle()', () => {
     const inlineStyleRanges = blockInlineStyleRanges(newEditorState4, 0);
     const inlineStyleOverride = newEditorState4.getInlineStyleOverride();
     expect(inlineStyleRanges).to.deep.equal([]);
-    expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_FONT_SIZE_12px', 'CUSTOM_COLOR_green']);
+    expect(inlineStyleOverride.toJS()).to.deep.equal(['CUSTOM_fontSize_12px', 'CUSTOM_color_green']);
   });
   it('should add 2 different colors and undo redo them one by one', () => {
     const editorState = new Raw()
@@ -256,7 +256,7 @@ describe('toggle()', () => {
     const inlineStyleRanges = blockInlineStyleRanges(newEditorState2, 0);
     expect(inlineStyleRanges).to.deep.equal([
       {
-        style: 'CUSTOM_COLOR_green',
+        style: 'CUSTOM_color_green',
         length: 5,
         offset: 0,
       }]);
@@ -264,7 +264,7 @@ describe('toggle()', () => {
     const newEditorState3 = EditorState.undo(newEditorState2);
     expect(blockInlineStyleRanges(newEditorState3, 0)).to.deep.equal([
       {
-        style: 'CUSTOM_COLOR_red',
+        style: 'CUSTOM_color_red',
         length: 5,
         offset: 0,
       }]);
@@ -272,7 +272,7 @@ describe('toggle()', () => {
     const newEditorState4 = EditorState.redo(newEditorState3);
     expect(blockInlineStyleRanges(newEditorState4, 0)).to.deep.equal([
       {
-        style: 'CUSTOM_COLOR_green',
+        style: 'CUSTOM_color_green',
         length: 5,
         offset: 0,
       }]);
@@ -283,7 +283,7 @@ describe('customStyleFn()', () => {
   const config = ['color'];
   const { customStyleFn } = createStyles(config);
   it('should create a css object from a string', () => {
-    const result = customStyleFn(OrderedSet(['CUSTOM_COLOR_red']));
+    const result = customStyleFn(OrderedSet(['CUSTOM_color_red']));
     expect(result).to.deep.equal({ color: 'red' });
   });
 });
@@ -303,7 +303,7 @@ describe('current()', () => {
 });
 
 describe('exporter()', () => {
-  const config = ['color', 'background-color'];
+  const config = ['color', 'background-color', 'font-family'];
   const customStyleMap = {
     MARK: {
       backgroundColor: 'Yellow',
@@ -321,12 +321,12 @@ describe('exporter()', () => {
     const newEditorState2 = styles.backgroundColor.add(newEditorState, 'green');
     const inlineStyles = exporter(newEditorState2);
     expect(inlineStyles).to.deep.equal({
-      'CUSTOM_COLOR_#FF0000': {
+      'CUSTOM_color_#FF0000': {
         style: {
           color: '#FF0000',
         },
       },
-      CUSTOM_BACKGROUND_COLOR_green: {
+      CUSTOM_backgroundColor_green: {
         style: {
           backgroundColor: 'green',
         },
@@ -344,7 +344,7 @@ describe('exporter()', () => {
     const newEditorState3 = styles.backgroundColor.add(newEditorState2, 'green');
     const inlineStyles = exporter(newEditorState3);
     expect(inlineStyles).to.deep.equal({
-      CUSTOM_COLOR_red: {
+      CUSTOM_color_red: {
         style: {
           color: 'red',
         },
@@ -354,7 +354,7 @@ describe('exporter()', () => {
           fontWeight: 'bold',
         },
       },
-      CUSTOM_BACKGROUND_COLOR_green: {
+      CUSTOM_backgroundColor_green: {
         style: {
           backgroundColor: 'green',
         },
@@ -373,7 +373,7 @@ describe('exporter()', () => {
     const newEditorState4 = styles.backgroundColor.add(newEditorState3, 'green');
     const inlineStyles = exporter(newEditorState4);
     expect(inlineStyles).to.deep.equal({
-      CUSTOM_COLOR_red: {
+      CUSTOM_color_red: {
         style: {
           color: 'red',
         },
@@ -383,7 +383,7 @@ describe('exporter()', () => {
           fontWeight: 'bold',
         },
       },
-      CUSTOM_BACKGROUND_COLOR_green: {
+      CUSTOM_backgroundColor_green: {
         style: {
           backgroundColor: 'green',
         },
@@ -401,7 +401,7 @@ describe('exporter()', () => {
     const newEditorState3 = styles.backgroundColor.add(newEditorState2, 'green');
     const inlineStyles = exporter(newEditorState3);
     expect(inlineStyles).to.deep.equal({
-      CUSTOM_COLOR_red: {
+      CUSTOM_color_red: {
         style: {
           color: 'red',
         },
@@ -412,7 +412,7 @@ describe('exporter()', () => {
           fontStyle: 'italic',
         },
       },
-      CUSTOM_BACKGROUND_COLOR_green: {
+      CUSTOM_backgroundColor_green: {
         style: {
           backgroundColor: 'green',
         },
@@ -431,7 +431,7 @@ describe('exporter()', () => {
     const newEditorState4 = styles.backgroundColor.add(newEditorState3, 'green');
     const inlineStyles = exporter(newEditorState4);
     expect(inlineStyles).to.deep.equal({
-      CUSTOM_COLOR_red: {
+      CUSTOM_color_red: {
         style: {
           color: 'red',
         },
@@ -447,7 +447,7 @@ describe('exporter()', () => {
           fontStyle: 'italic',
         },
       },
-      CUSTOM_BACKGROUND_COLOR_green: {
+      CUSTOM_backgroundColor_green: {
         style: {
           backgroundColor: 'green',
         },
@@ -481,13 +481,33 @@ describe('exporter()', () => {
           fontWeight: 'bold',
         },
       },
-      CUSTOM_COLOR_green: {
+      CUSTOM_color_green: {
         style: {
           color: 'green',
         },
       },
     });
   });
+  it('should properly process inline styles with underscore in value', () => {
+    const editorState = new Raw()
+        .addBlock('block 1')
+        .anchorKey(0)
+        .focusKey(5)
+        .toEditorState();
+    const toggleInlineStyle = (
+        _editorState,
+        style
+    ) => RichUtils.toggleInlineStyle(_editorState, style);
+    const newEditorState1 = styles.fontFamily.add(editorState, 'KaiTi_GB2312');
+    const inlineStyles = exporter(newEditorState1);
+    expect(inlineStyles).to.deep.equal({
+      CUSTOM_fontFamily_KaiTi_GB2312: {
+        style: {
+          fontFamily: 'KaiTi_GB2312',
+        },
+      },
+    });
+  });
 });
 
 describe('validatePrefix()', () => {