abdullah/til
1
0
Fork 0
mirror of https://github.com/jbranchaud/til synced 2026-01-05 08:08:02 +00:00
Code Issues Projects Releases Wiki Activity

Add CSS !important Is Not Supported By Inline Styles as a react til

Browse Source
This commit is contained in:
jbranchaud
2018-10-03 13:39:14 -05:00
parent 5e351d6b05
commit 5021590d5a
2 changed files with 20 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
README.md
View File

@@ -10,7 +10,7 @@ smart people at [Hashrocket](http://hashrocket.com/).
For a steady stream of TILs from a variety of rocketeers, checkout For a steady stream of TILs from a variety of rocketeers, checkout
[til.hashrocket.com](https://til.hashrocket.com/). [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 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 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) - [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) - [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) - [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) - [Destructure Variables As Props To A Component](react/destructure-variables-as-props-to-a-component.md)

18
react/css-important-is-not-supported-by-inline-styles.md Normal file
View File

@@ -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
<div style={{ color: "red !important" }}>
My div
</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)