docs(v2): require using JSX flavored style objects in mdx (#2257)

* docs(v2): require using JSX flavored style objects instead of style attributes in Docusaurus 2

* resolve discussions

website/versioned_docs/version-2.0.0-alpha.39/markdown-features.mdx

@@ -128,7 +128,9 @@ image: https://i.imgur.com/mErPwqL.png
 
 Docusaurus has built-in support for [MDX](https://mdxjs.com), which allows you to write JSX within your Markdown files and render them as React components.
 
-**Note:** While both `.md` and `.mdx` files are parsed using MDX, some of the syntax are treated slightly differently. For the most accurate parsing and better editor support, we recommend using the `.mdx` extension for files containing MDX syntax. Let's rename the previous file to `greeting.mdx`
+**Note 1:** While both `.md` and `.mdx` files are parsed using MDX, some of the syntax are treated slightly differently. For the most accurate parsing and better editor support, we recommend using the `.mdx` extension for files containing MDX syntax. Let's rename the previous file to `greeting.mdx`.
+
+**Note 2:** Since all doc files are parsed using MDX, any HTML is treated as JSX. Therefore, if you need to inline-style a component, follow JSX flavor and provide style objects. This behavior is different from Docusaurus 1. See also [Migrating from v1 to v2](./migrating-from-v1-to-v2.md#convert-style-attributes-to-style-objects-in-mdx).
 
 Try this block here:
 

website/versioned_docs/version-2.0.0-alpha.39/migrating-from-v1-to-v2.md

@@ -664,3 +664,21 @@ website
 │   ├── version-1.1.0-sidebars.json
 │   └── version-1.0.0-sidebars.json
 ```
+
+### Convert style attributes to style objects in MDX
+
+Docusaurus 2 uses JSX for doc files. If you have any style attributes in your Docusaurus 1 docs, convert them to style objects, like this:
+
+```diff
+---
+id: demo
+title: Demo
+---
+
+## Section
+
+hello world
+
+- pre style="background: black">zzz</pre>
++ pre style={{background: 'black'}}>zzz</pre>
+```