diff --git a/src/BootstrapMixin.js b/src/BootstrapMixin.js
index df8795de4d..cc5e1f1a15 100644
--- a/src/BootstrapMixin.js
+++ b/src/BootstrapMixin.js
@@ -34,9 +34,13 @@ const BootstrapMixin = {
classes[prefix + bsSize] = true;
}
- let bsStyle = this.props.bsStyle && styleMaps.STYLES[this.props.bsStyle];
if (this.props.bsStyle) {
- classes[prefix + bsStyle] = true;
+ let bsStyle = styleMaps.STYLES[this.props.bsStyle];
+ if (bsStyle) {
+ classes[prefix + bsStyle] = true;
+ } else {
+ classes[this.props.bsStyle] = true;
+ }
}
}
diff --git a/test/BootstrapMixinSpec.js b/test/BootstrapMixinSpec.js
index 333870506b..32eaf0e147 100644
--- a/test/BootstrapMixinSpec.js
+++ b/test/BootstrapMixinSpec.js
@@ -2,6 +2,7 @@ import React from 'react';
import ReactTestUtils from 'react/lib/ReactTestUtils';
import BootstrapMixin from '../src/BootstrapMixin';
import styleMaps from '../src/styleMaps';
+import { shouldWarn } from './helpers';
let Component;
@@ -197,14 +198,28 @@ describe('BootstrapMixin', function () {
assert.equal(instance.prefixClass('title'), 'btn-title');
});
- it('should return "btn btn-wacky"', function () {
- styleMaps.addStyle('wacky');
- let instance = ReactTestUtils.renderIntoDocument(
-
- content
-
- );
- assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-wacky': true});
+ describe('Custom styles', function () {
+ it('should validate OK custom styles added via "addStyle()"', function () {
+
+ styleMaps.addStyle('wacky');
+
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ content
+
+ );
+ assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'btn-wacky': true});
+ });
+
+ it('should allow custom styles as is but with validation warning', function () {
+ let instance = ReactTestUtils.renderIntoDocument(
+
+ content
+
+ );
+ assert.deepEqual(instance.getBsClassSet(), {'btn': true, 'my-custom-class': true});
+ shouldWarn('Invalid prop `bsStyle` of value `my-custom-class`');
+ });
});
});
});