From 5021590d5acc9f31418f9d4b5e61e389e9c88d6a Mon Sep 17 00:00:00 2001 From: jbranchaud Date: Wed, 3 Oct 2018 13:39:14 -0500 Subject: [PATCH] Add CSS !important Is Not Supported By Inline Styles as a react til --- README.md | 3 ++- ...ortant-is-not-supported-by-inline-styles.md | 18 ++++++++++++++++++ 2 files changed, 20 insertions(+), 1 deletion(-) create mode 100644 react/css-important-is-not-supported-by-inline-styles.md diff --git a/README.md b/README.md index 10909d3..4c6504f 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/). For a steady stream of TILs from a variety of rocketeers, checkout [til.hashrocket.com](https://til.hashrocket.com/). -_705 TILs and counting..._ +_706 TILs and counting..._ --- @@ -471,6 +471,7 @@ _705 TILs and counting..._ - [Create Dynamically Named Custom React Components](react/create-dynamically-named-custom-react-components.md) - [create-react-app Comes With Lodash](react/create-react-app-comes-with-lodash.md) - [create-react-app Has A Default Test Setup File](react/create-react-app-has-a-default-test-setup-file.md) +- [CSS !important Is Not Supported By Inline Styles](react/css-important-is-not-supported-by-inline-styles.md) - [Debug Jest Tests In create-react-app](react/debug-jest-tests-in-create-react-app.md) - [Defining State In A Simple Class Component](react/defining-state-in-a-simple-class-component.md) - [Destructure Variables As Props To A Component](react/destructure-variables-as-props-to-a-component.md) diff --git a/react/css-important-is-not-supported-by-inline-styles.md b/react/css-important-is-not-supported-by-inline-styles.md new file mode 100644 index 0000000..a649996 --- /dev/null +++ b/react/css-important-is-not-supported-by-inline-styles.md @@ -0,0 +1,18 @@ +# CSS !important Is Not Supported By Inline Styles + +You can get pretty far with React's inline styling of components. There are +however a few limitations. One such limitation is that the `!important` +clause is not supported. + +If you try applying `!important` to an inline style like so: + +```jsx +
+ My div +
+``` + +You'll be disappointed when you open up the browser and inspect that `div` +tag. The `color` rule will be ignored and excluded from the output html. + +[source](https://github.com/facebook/react/issues/1881)