From 1f471513638d0573ba8e00d1860e4ff3415fb807 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Fri, 1 Jul 2022 16:43:06 +0800
Subject: [PATCH] docs: mention MDXContent (#7705)

---
 .../markdown-features-react.mdx               | 30 ++++++++++++++++++-
 1 file changed, 29 insertions(+), 1 deletion(-)

diff --git a/website/docs/guides/markdown-features/markdown-features-react.mdx b/website/docs/guides/markdown-features/markdown-features-react.mdx
index 5c6b8a5a90..b7c76faacb 100644
--- a/website/docs/guides/markdown-features/markdown-features-react.mdx
+++ b/website/docs/guides/markdown-features/markdown-features-react.mdx
@@ -200,6 +200,33 @@ We use lower-case tag names like `highlight` to "pretend" that they are intrinsi
 
 :::
 
+:::caution
+
+This feature is powered by [a wrapper provider](https://mdx-git-renovate-babel-monorepo-mdx.vercel.app/advanced/components#mdxprovider). If you are importing Markdown in a React page, you have to supply this provider yourself through the `MDXContent` theme component.
+
+```jsx title="src/pages/index.js"
+import React from 'react';
+import FeatureDisplay from './_featureDisplay.mdx';
+// highlight-next-line
+import MDXContent from '@theme/MDXContent';
+
+export default function LandingPage() {
+  return (
+    <div>
+      {/* highlight-start */}
+      <MDXContent>
+        <FeatureDisplay />
+      </MDXContent>
+      {/* highlight-end */}
+    </div>
+  );
+}
+```
+
+If you don't wrap your imported MDX with `MDXContent`, the global scope will not be available.
+
+:::
+
 ### Markdown and JSX interoperability {#markdown-and-jsx-interoperability}
 
 Docusaurus v2 is using MDX v1, which has a lot of known cases where the content fails to be correctly parsed as Markdown. Use the **[MDX playground](https://mdx-git-renovate-babel-monorepo-mdx.vercel.app/playground)** to ensure that your syntax is valid MDX.
@@ -420,9 +447,10 @@ Now I'm actually just text
 </div>
 </TabItem>
 </Tabs>
-</details>
 ```
 
+</details>
+
 ## Importing code snippets {#importing-code-snippets}
 
 You can not only import a file containing a component definition, but also import any code file as raw text, and then insert it in a code block, thanks to [Webpack raw-loader](https://webpack.js.org/loaders/raw-loader/). In order to use `raw-loader`, you first need to install it in your project: