diff --git a/src/renderers/dom/shared/CSSPropertyOperations.js b/src/renderers/dom/shared/CSSPropertyOperations.js index 492e2124b2d1f..2bc2ae1745674 100644 --- a/src/renderers/dom/shared/CSSPropertyOperations.js +++ b/src/renderers/dom/shared/CSSPropertyOperations.js @@ -128,6 +128,10 @@ if (__DEV__) { * @param {ReactDOMComponent} component */ var warnValidStyle = function(name, value, component) { + // Don't warn for CSS variables + if (name.indexOf('--') === 0) { + return; + } var owner; if (component) { owner = component._currentElement._owner; @@ -215,7 +219,9 @@ var CSSPropertyOperations = { if (styleName === 'float' || styleName === 'cssFloat') { styleName = styleFloatAccessor; } - if (styleValue) { + if (styleName.indexOf('--') === 0) { + style.setProperty(styleName, styleValue); + } else if (styleValue) { style[styleName] = styleValue; } else { var expansion = diff --git a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js b/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js index 45343416e762f..e383549ec51ad 100644 --- a/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js +++ b/src/renderers/dom/shared/__tests__/CSSPropertyOperations-test.js @@ -253,4 +253,18 @@ describe('CSSPropertyOperations', () => { 'Check the render method of `Comp`.', ); }); + + it('should not warn when setting CSS variables', () => { + class Comp extends React.Component { + render() { + return
; + } + } + + spyOn(console, 'error'); + var root = document.createElement('div'); + ReactDOM.render(, root); + + expect(console.error.calls.count()).toBe(0); + }); });