[Docs] no-unknown-property add a mention about using ignores properties with libraries that add props

Author: sjarva

docs/rules/no-unknown-property.md

@@ -43,7 +43,6 @@ var AnotherComponent = <Foo.bar for="bar" />;
 // Custom web components are ignored
 var MyElem = <div class="foo" is="my-elem"></div>;
 var AtomPanel = <atom-panel class="foo"></atom-panel>;
-
 ```
 
 ## Rule Options
@@ -57,6 +56,24 @@ var AtomPanel = <atom-panel class="foo"></atom-panel>;
 - `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.
 - `ignore`: optional array of property and attribute names to ignore during validation.
 
+
+If you are using a library that passes something as a prop to JSX elements, it is recommended to add those props to the ignored properties.
+
+For example, if you use [emotion](https://emotion.sh/docs/introduction) and its [`css` prop](https://emotion.sh/docs/css-prop)),
+add the following to your `.eslintrc` config file:
+```js
+...
+"react/no-unknown-property": ['error', { ignore: ['css'] }]
+...
+
+```
+
+Now, the following code passes:
+```js
+var StyledDiv = <div css={{color: 'pink'}}></div>
+```
+
+
 ## When Not To Use It
 
 If you are not using JSX you can disable this rule.

tests/lib/rules/no-unknown-property.js

@@ -92,6 +92,10 @@ ruleTester.run('no-unknown-property', rule, {
       code: '<div someProp="bar"></div>;',
       options: [{ ignore: ['someProp'] }],
     },
+    {
+      code: '<div css={{flex: 1}}></div>;',
+      options: [{ ignore: ['css'] }],
+    },
 
     // aria-* attributes should work
     { code: '<button aria-haspopup="true">Click me to open pop up</button>;' },