s/class/className/ in MDX (#4716)

Summary:
These were generating warnings in dev mode. Docusaurus uses MDX which converts the entire markdown into React components. As such, you need to use the same props.

The site _works_ but I think that's just because React ultimately passes everything onto the DOM node now. Better to just do the "right" thing.

FWIW MDX does mention this in their docs:
https://mdxjs.com/docs/what-is-mdx/#markdown-for-the-component-era

Pull Request resolved: #4716

Reviewed By: captbaritone

Differential Revision: D58616130

Pulled By: zpao

fbshipit-source-id: e6e0c732d151053750f564afe7b69d8c702461db

website/docs/home.md

@@ -45,7 +45,7 @@ Relay has a UI-agnostic layer that fetches and manages data, and a React-specifi
 
 <OssOnly>
 
-<div class="bigCallToAction">
+<div className="bigCallToAction">
 Start with the <strong><a href="tutorial/intro/">tutorial</a></strong> — it will take you step-by-step through building a Relay app.
 </div>
 

website/docs/tutorial/queries-1.md

@@ -69,11 +69,11 @@ const NewsfeedQuery = graphql`
 
 Let’s break this down:
 
-* To embed GraphQL within JavaScript, we put a string literal <span class="color1">marked with the <code>graphql``</code> tag</span>. This tag allows the Relay compiler to find and compile the GraphQL within a JavaScript codebase.
-* Our GraphQL string consists of a <span class="color2">query declaration</span> with the keyword `query` and then a query name. Note that the query name **must** begin with the module name (in this case <code>Newsfeed</code>).
+* To embed GraphQL within JavaScript, we put a string literal <span className="color1">marked with the <code>graphql``</code> tag</span>. This tag allows the Relay compiler to find and compile the GraphQL within a JavaScript codebase.
+* Our GraphQL string consists of a <span className="color2">query declaration</span> with the keyword `query` and then a query name. Note that the query name **must** begin with the module name (in this case <code>Newsfeed</code>).
 * Inside the query declaration are *fields*, which specify what information to query for*:*
-    * Some fields are *<span class="color3">scalar fields</span>* that retrieve a string, number, or other unit of information.
-    * Other fields are *<span class="color4">edges</span>* that let us traverse from one node in the graph to another. When a field is an edge, it’s followed by another block `{ }` containing fields for the node at the other end of the edge. Here, the `poster` field is an edge that goes from a Story to a Person who posted it. Once we’ve traversed to the Person, we can include fields about the Person such as their `name`.
+    * Some fields are *<span className="color3">scalar fields</span>* that retrieve a string, number, or other unit of information.
+    * Other fields are *<span className="color4">edges</span>* that let us traverse from one node in the graph to another. When a field is an edge, it’s followed by another block `{ }` containing fields for the node at the other end of the edge. Here, the `poster` field is an edge that goes from a Story to a Person who posted it. Once we’ve traversed to the Person, we can include fields about the Person such as their `name`.
 
 This illustrates the part of the graph that this query is asking for:
 

website/versioned_docs/version-v14.0.0/home.md

@@ -45,7 +45,7 @@ Relay has a UI-agnostic layer that fetches and manages data, and a React-specifi
 
 <OssOnly>
 
-<div class="bigCallToAction">
+<div className="bigCallToAction">
 Start with the <strong><a href="tutorial/intro/">tutorial</a></strong> — it will take you step-by-step through building a Relay app.
 </div>
 

website/versioned_docs/version-v14.0.0/tutorial/queries-1.md

@@ -69,11 +69,11 @@ const NewsfeedQuery = graphql`
 
 Let’s break this down:
 
-* To embed GraphQL within Javascript, we put a string literal <span class="color1">marked with the <code>graphql``</code> tag</span>. This tag allows the Relay compiler to find and compile the GraphQL within a Javascript codebase.
-* Our GraphQL string consists of a <span class="color2">query declaration</span> with the keyword `query` and then a query name.
+* To embed GraphQL within Javascript, we put a string literal <span className="color1">marked with the <code>graphql``</code> tag</span>. This tag allows the Relay compiler to find and compile the GraphQL within a Javascript codebase.
+* Our GraphQL string consists of a <span className="color2">query declaration</span> with the keyword `query` and then a query name.
 * Inside the query declaration are *fields*, which specify what information to query for*:*
-    * Some fields are *<span class="color3">scalar fields</span>* that retrieve a string, number, or other unit of information.
-    * Other fields are *<span class="color4">edges</span>* that let us traverse from one node in the graph to another. When a field is an edge, it’s followed by another block `{ }` containing fields for the node at the other end of the edge. Here, the `poster` field is an edge that goes from a Story to a Person who posted it. Once we’ve traversed to the Person, we can include fields about the Person such as their `name`.
+    * Some fields are *<span className="color3">scalar fields</span>* that retrieve a string, number, or other unit of information.
+    * Other fields are *<span className="color4">edges</span>* that let us traverse from one node in the graph to another. When a field is an edge, it’s followed by another block `{ }` containing fields for the node at the other end of the edge. Here, the `poster` field is an edge that goes from a Story to a Person who posted it. Once we’ve traversed to the Person, we can include fields about the Person such as their `name`.
 
 This illustrates the part of the graph that this query is asking for:
 

website/versioned_docs/version-v15.0.0/home.md

@@ -45,7 +45,7 @@ Relay has a UI-agnostic layer that fetches and manages data, and a React-specifi
 
 <OssOnly>
 
-<div class="bigCallToAction">
+<div className="bigCallToAction">
 Start with the <strong><a href="tutorial/intro/">tutorial</a></strong> — it will take you step-by-step through building a Relay app.
 </div>
 

website/versioned_docs/version-v15.0.0/tutorial/queries-1.md

@@ -69,11 +69,11 @@ const NewsfeedQuery = graphql`
 
 Let’s break this down:
 
-* To embed GraphQL within Javascript, we put a string literal <span class="color1">marked with the <code>graphql``</code> tag</span>. This tag allows the Relay compiler to find and compile the GraphQL within a Javascript codebase.
-* Our GraphQL string consists of a <span class="color2">query declaration</span> with the keyword `query` and then a query name.
+* To embed GraphQL within Javascript, we put a string literal <span className="color1">marked with the <code>graphql``</code> tag</span>. This tag allows the Relay compiler to find and compile the GraphQL within a Javascript codebase.
+* Our GraphQL string consists of a <span className="color2">query declaration</span> with the keyword `query` and then a query name.
 * Inside the query declaration are *fields*, which specify what information to query for*:*
-    * Some fields are *<span class="color3">scalar fields</span>* that retrieve a string, number, or other unit of information.
-    * Other fields are *<span class="color4">edges</span>* that let us traverse from one node in the graph to another. When a field is an edge, it’s followed by another block `{ }` containing fields for the node at the other end of the edge. Here, the `poster` field is an edge that goes from a Story to a Person who posted it. Once we’ve traversed to the Person, we can include fields about the Person such as their `name`.
+    * Some fields are *<span className="color3">scalar fields</span>* that retrieve a string, number, or other unit of information.
+    * Other fields are *<span className="color4">edges</span>* that let us traverse from one node in the graph to another. When a field is an edge, it’s followed by another block `{ }` containing fields for the node at the other end of the edge. Here, the `poster` field is an edge that goes from a Story to a Person who posted it. Once we’ve traversed to the Person, we can include fields about the Person such as their `name`.
 
 This illustrates the part of the graph that this query is asking for:
 

website/versioned_docs/version-v16.0.0/home.md

@@ -45,7 +45,7 @@ Relay has a UI-agnostic layer that fetches and manages data, and a React-specifi
 
 <OssOnly>
 
-<div class="bigCallToAction">
+<div className="bigCallToAction">
 Start with the <strong><a href="tutorial/intro/">tutorial</a></strong> — it will take you step-by-step through building a Relay app.
 </div>
 

website/versioned_docs/version-v16.0.0/tutorial/queries-1.md

@@ -69,11 +69,11 @@ const NewsfeedQuery = graphql`
 
 Let’s break this down:
 
-* To embed GraphQL within Javascript, we put a string literal <span class="color1">marked with the <code>graphql``</code> tag</span>. This tag allows the Relay compiler to find and compile the GraphQL within a Javascript codebase.
-* Our GraphQL string consists of a <span class="color2">query declaration</span> with the keyword `query` and then a query name.
+* To embed GraphQL within Javascript, we put a string literal <span className="color1">marked with the <code>graphql``</code> tag</span>. This tag allows the Relay compiler to find and compile the GraphQL within a Javascript codebase.
+* Our GraphQL string consists of a <span className="color2">query declaration</span> with the keyword `query` and then a query name.
 * Inside the query declaration are *fields*, which specify what information to query for*:*
-    * Some fields are *<span class="color3">scalar fields</span>* that retrieve a string, number, or other unit of information.
-    * Other fields are *<span class="color4">edges</span>* that let us traverse from one node in the graph to another. When a field is an edge, it’s followed by another block `{ }` containing fields for the node at the other end of the edge. Here, the `poster` field is an edge that goes from a Story to a Person who posted it. Once we’ve traversed to the Person, we can include fields about the Person such as their `name`.
+    * Some fields are *<span className="color3">scalar fields</span>* that retrieve a string, number, or other unit of information.
+    * Other fields are *<span className="color4">edges</span>* that let us traverse from one node in the graph to another. When a field is an edge, it’s followed by another block `{ }` containing fields for the node at the other end of the edge. Here, the `poster` field is an edge that goes from a Story to a Person who posted it. Once we’ve traversed to the Person, we can include fields about the Person such as their `name`.
 
 This illustrates the part of the graph that this query is asking for: