fix: update docs references (#2497)

Author: suguanYang

docs/babel.mdx

@@ -6,7 +6,7 @@ title: 'Babel Plugin'
 
 ### Install
 
-In `emotion` version 8 and above, installation is optional. In older versions, installation is required. See the [installation instructions](/docs/install.md).
+In `emotion` version 8 and above, installation is optional. In older versions, installation is required. See the [installation instructions](/docs/install.mdx).
 
 ### Features which are enabled with the babel plugin
 
@@ -24,4 +24,4 @@ When enabled, navigate directly to the style declaration in your javascript file
 
 ### Components as selectors
 
-The ability to refer to another component to apply override styles depending on nesting context. Learn more in the [styled docs](/docs/styled.md#targeting-another-emotion-component).
+The ability to refer to another component to apply override styles depending on nesting context. Learn more in the [styled docs](/docs/styled.mdx#targeting-another-emotion-component).

docs/css-prop.mdx

@@ -122,7 +122,7 @@ render(
 )
 ```
 
-> [Object Style Documentation](/docs/object-styles.md).
+> [Object Style Documentation](/docs/object-styles.mdx).
 
 ## String Styles
 

docs/extract-static.mdx

@@ -4,7 +4,7 @@ title: 'Extract Static'
 
 # Static Extraction has been removed from Emotion, this page only exists to explain the decision
 
-###### [requires babel plugin](/docs/babel.md)
+###### [requires babel plugin](/docs/babel.mdx)
 
 ## DEPRECATED
 

docs/install.mdx

@@ -14,7 +14,7 @@ or if you prefer npm
 npm install --save @emotion/react
 ```
 
-To use it, import what you need, for example use [the css prop](/docs/css-prop.md) to create class names with styles.
+To use it, import what you need, for example use [the css prop](/docs/css-prop.mdx) to create class names with styles.
 
 ```jsx
 // @live
@@ -47,7 +47,7 @@ render(
 )
 ```
 
-## With [`styled`](/docs/styled.md)
+## With [`styled`](/docs/styled.mdx)
 
 `styled` is a way to create React components that have styles attached to them.
 
@@ -77,7 +77,7 @@ render(<Button>This is a hotpink button.</Button>)
 
 > Note:
 >
-> If you're using Create React App, you can use the [Babel macro](./babel-macros.md)
+> If you're using Create React App, you can use the [Babel macro](/docs/babel-macros.mdx)
 
 Emotion has an optional [Babel](https://babeljs.io/) plugin that optimizes styles by compressing and hoisting them and creates a better developer experience with source maps and labels.
 

docs/introduction.mdx

@@ -24,7 +24,7 @@ The [@emotion/css](https://www.npmjs.com/package/@emotion/css) package is framew
 
 - You simply prefer to use the `css` function to generate class names and `cx` to compose them.
 
-- Server side rendering requires [additional work to set up](/docs/ssr.md#api)
+- Server side rendering requires [additional work to set up](/docs/ssr.mdx#api)
 
 ```jsx
 // @live
@@ -74,7 +74,7 @@ The ["@emotion/react"](https://www.npmjs.com/package/@emotion/react) package req
 
 - ESLint plugins available to ensure proper patterns and configuration are set.
 
-**[`@emotion/react` css prop documentation](/docs/css-prop.md)**
+**[`@emotion/react` css prop documentation](/docs/css-prop.mdx)**
 
 ```jsx
 // @live
@@ -107,7 +107,7 @@ npm i @emotion/styled @emotion/react
 
 The [@emotion/styled](https://www.npmjs.com/package/@emotion/styled) package is for those who prefer to use the `styled.div` style API for creating components.
 
-**[`@emotion/styled` documentation](/docs/styled.md)**
+**[`@emotion/styled` documentation](/docs/styled.mdx)**
 
 ```jsx
 // @live

docs/migrating-to-emotion-10.mdx

@@ -173,7 +173,7 @@ let element = (
 )
 ```
 
-If you have components that accepts props like `wrapperClassName`, etc., you can use the [`ClassNames` component](./class-names.md).
+If you have components that accepts props like `wrapperClassName`, etc., you can use the [`ClassNames` component](/docs/class-names.mdx).
 
 ```jsx
 import { css } from 'emotion'

docs/object-styles.mdx

@@ -183,7 +183,7 @@ render(
 
 ### Composition
 
-[Learn more composition in Emotion](/docs/composition.md).
+[Learn more composition in Emotion](/docs/composition.mdx).
 
 ```jsx
 // @live

docs/source-maps.mdx

@@ -12,7 +12,7 @@ Emotion supports source maps for styles authored in JavaScript.
 
 Required For Source Maps:
 
-1. `@emotion/babel-plugin` must be in your Babel setup. [[documentation]](./install.md)
+1. `@emotion/babel-plugin` must be in your Babel setup. [[documentation]](/docs/install.mdx)
 2. `process.env.NODE_ENV` must be any value except `"production"`
 
 > Note: