Add support for using !important in inline style values

Fix facebook#1881
necolas · Feb 14, 2018 · 7cc1ff4 · 7cc1ff4
1 parent d529d20
commit 7cc1ff4
Showing 1 changed file with 11 additions and 2 deletions.
diff --git a/packages/react-dom/src/shared/CSSPropertyOperations.js b/packages/react-dom/src/shared/CSSPropertyOperations.js
@@ -58,6 +58,9 @@ export function setValueForStyles(node, styles, getStack) {
       continue;
     }
     const isCustomProperty = styleName.indexOf('--') === 0;
+    const isImportant =
+      typeof styles[styleName] === 'string' &&
+      styles[styleName].indexOf('!important') > -1;
     if (__DEV__) {
       if (!isCustomProperty) {
         warnValidStyle(styleName, styles[styleName], getStack);
@@ -71,8 +74,14 @@ export function setValueForStyles(node, styles, getStack) {
     if (styleName === 'float') {
       styleName = 'cssFloat';
     }
-    if (isCustomProperty) {
-      style.setProperty(styleName, styleValue);
+    if (isCustomProperty || isImportant) {
+      const name = isCustomProperty ? styleName : hyphenateStyleName(styleName);
+      if (isImportant) {
+        const [value, priority] = styleValue.split('!');
+        style.setProperty(name, value, priority);
+      } else {
+        style.setProperty(name, styleValue);
+      }
     } else {
       style[styleName] = styleValue;
     }