[docs] Fix typo in Material UI overview page (#33087)

CHANGELOG.old.md

@@ -4812,7 +4812,7 @@ The `TablePagination` component does no longer try to fix invalid (`page`, `coun
 
 - [styles] Change the withTheme API (#14565) @oliviertassinari
 
-Remove the first option argument of `withTheme()`. The first argument was a placeholder for a potential future option. We have never found a need for it. It's time to remove this argument. It matches the emotion and styled-components API.
+Remove the first option argument of `withTheme()`. The first argument was a placeholder for a potential future option. We have never found a need for it. It's time to remove this argument. It matches the Emotion and styled-components API.
 
 ```diff
 -const DeepChild = withTheme()(DeepChildRaw);
@@ -5426,7 +5426,7 @@ The Tabs `fullWidth` and `scrollable` properties can't be used at the same time.
 
 - [examples] Add nextjs-hooks-with-typescript (#13981) @virzak
 - [docs] Theme usage with styled-components (#13999) @oliviertassinari
-- [docs] Update the emotion documentation (#14001) @oliviertassinari
+- [docs] Update the Emotion documentation (#14001) @oliviertassinari
 - [docs] Duplicate all the demos with the React Hooks API (#13497) @adeelibr
 - [docs] Set react-jss version in nextjs example (#14015) @goofiw
 - [docs] Fix fullWidth deprecation warnings (#14010) @oliviertassinari
@@ -5783,7 +5783,7 @@ Here are some highlights ✨:
 - Introduce a new `@material-ui/styles` package 💅 (#13503).
 
 The Material UI's styling solution has pretty much stayed the same [for the last 12 months](https://github.com/oliviertassinari/a-journey-toward-better-style).
-Some interesting CSS-in-JS libraries like styled-components, emotion or linaria have emerged.
+Some interesting CSS-in-JS libraries like styled-components, Emotion or linaria have emerged.
 This new package is a significant step forward. Some of the key features:
 
 - Supports 4 different APIs: hooks, styled-components, higher-order components and render props.
@@ -6322,7 +6322,7 @@ It contains many bug fixes 🐛 and documentation improvements 📝.
 - [docs] Update themes.md (#12942) @brucegl
 - [docs] Fix documentation error in <Input /> (#12955) @lukePeavey
 - [docs] Minor style update of the tabs demos (#12958) @dotku
-- [docs] Glamorous is deprecated for emotion (#12963) @oliviertassinari
+- [docs] Glamorous is deprecated for Emotion (#12963) @oliviertassinari
 - [docs] Add Emotion to style library interoperability guide (#12966) @lukePeavey
 - [docs] Fix IconButton Snackbar demos (#12964) @bhalahariharan
 - [docs] Show how to combine OutlinedInput and FilledInput (#12968) @oliviertassinari

docs/data/base/getting-started/overview/overview.md

@@ -23,7 +23,7 @@ Look for the [`package: base`](https://github.com/mui/material-ui/labels/package
 ## Advantages of MUI Base
 
 - **Ship faster:** MUI Base gives you the foundational building blocks you need to assemble a sleek and sophisticated user interface in a fraction of the time that it would take to do it all from scratch.
-- **You own the CSS:** unlike Material UI, which uses emotion as a default style engine, MUI Base has no built-in styling solution.
+- **You own the CSS:** unlike Material UI, which uses Emotion as a default style engine, MUI Base has no built-in styling solution.
   This means you have complete control over your app's CSS.
 - **Accessibility:** MUI Base components are built with accessibility in mind.
   We do our best to make all components screen reader-friendly, and offer suggestions for optimizing accessibility throughout our documentation.

docs/data/material/getting-started/faq/faq.md

@@ -100,10 +100,10 @@ If you choose not to use it, you can still disable transitions and animations by
 }
 ```
 
-## Do I have to use emotion to style my app?
+## Do I have to use Emotion to style my app?
 
 No, it's not required.
-But if you are using the default styled engine (`@mui/styled-engine`) the emotion dependency comes built in, so carries no additional bundle size overhead.
+But if you are using the default styled engine (`@mui/styled-engine`) the Emotion dependency comes built in, so carries no additional bundle size overhead.
 
 Perhaps, however, you're adding some MUI components to an app that already uses another styling solution,
 or are already familiar with a different API, and don't want to learn a new one? In that case, head over to the

docs/data/material/getting-started/overview/overview.md

@@ -1,14 +1,14 @@
 # Material UI - Overview
 
-<p class="description">Material UI is library of React UI components that implements Google's Material Design.</p>
+<p class="description">Material UI is a library of React UI components that implements Google's Material Design.</p>
 
 ## Introduction
 
 Material UI is an open-source React component library that implements Google's [Material Design](https://material.io/).
 
 It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box.
 
-Material UI is beautiful by design, and features a suite of customization options that make it easy to implement your own custom design system on top of our components.
+Material UI is beautiful by design and features a suite of customization options that make it easy to implement your own custom design system on top of our components.
 
 :::info
 Material UI v5 supports Material Design v2.
@@ -28,7 +28,7 @@ You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/293
 
 ## Material UI vs. MUI Base
 
-Material UI and [MUI Base](/base/getting-started/overview/) feature many of the same UI components, but MUI Base comes without any default styles or styling solution.
+Material UI and [MUI Base](/base/getting-started/overview/) feature many of the same UI components, but MUI Base comes without any default styles or styling solutions.
 
 Material UI is _comprehensive_ in that it comes packaged with default styles, and is optimized to work with [Emotion](https://emotion.sh/) (or [styled-components](https://styled-components.com/)).
 

docs/data/material/guides/content-security-policy/content-security-policy.md

@@ -50,10 +50,10 @@ You should pass the nonce in the `<style>` tags on the server.
 />
 ```
 
-Then, you must pass this nonce to the emotion cache so it can add it to subsequent `<style>`.
+Then, you must pass this nonce to Emotion's cache so it can add it to subsequent `<style>`.
 
 :::warning
-Note, if you were using `StyledEngineProvider` with `injectFirst`, you will need to replace it with `CacheProvider` from emotion and add the `prepend: true` option.
+Note, if you were using `StyledEngineProvider` with `injectFirst`, you will need to replace it with `CacheProvider` from Emotion and add the `prepend: true` option.
 :::
 
 ```js

docs/data/material/guides/interoperability/interoperability.md

@@ -1,6 +1,6 @@
 # Style library interoperability
 
-<p class="description">While you can use the emotion based styling solution provided by MUI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).</p>
+<p class="description">While you can use the Emotion-based styling solution provided by MUI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).</p>
 
 This guide aims to document the most popular alternatives,
 but you should find that the principles applied here can be adapted to other libraries.
@@ -68,7 +68,7 @@ export default function GlobalCssPriority() {
 }
 ```
 
-**Note:** If you are using emotion and have a custom cache in your app, that one will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
+**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
 
 ```jsx
 import * as React from 'react';
@@ -221,7 +221,7 @@ export default function GlobalCssPriority() {
 }
 ```
 
-**Note:** If you are using emotion and have a custom cache in your app, that one will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
+**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
 
 ```jsx
 import * as React from 'react';
@@ -289,7 +289,7 @@ export default function GlobalCssSliderDeep() {
 
 ### Change the default styled engine
 
-By default, MUI components come with emotion as their style engine. If,
+By default, MUI components come with Emotion as their style engine. If,
 however, you would like to use `styled-components`, you can configure your app by following the [styled engine guide](/material-ui/guides/styled-engine/#how-to-switch-to-styled-components) or starting with one of the example projects:
 
 <!-- #default-branch-switch -->
@@ -478,7 +478,7 @@ export default function GlobalCssPriority() {
 }
 ```
 
-**Note:** If you are using emotion and have a custom cache in your app, that one will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
+**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
 
 ```jsx
 import * as React from 'react';
@@ -666,7 +666,7 @@ export default function GlobalCssPriority() {
 }
 ```
 
-**Note:** If you are using emotion and have a custom cache in your app, it will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
+**Note:** If you are using Emotion and have a custom cache in your app, it will override the one coming from MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example:
 
 ```jsx
 import * as React from 'react';

docs/data/material/guides/right-to-left/right-to-left.md

@@ -63,9 +63,9 @@ Having installed the plugin in your project, MUI components still require it to
 
 ### 4. Load the rtl plugin
 
-#### 4.1 emotion
+#### 4.1 Emotion
 
-If you use emotion as your style engine, you should create a new cache instance that uses the `stylis-plugin-rtl` (the default `prefixer` plugin must also be included in order to retain vendor prefixing) and provide that on the top of your application tree.
+If you use Emotion as your style engine, you should create a new cache instance that uses the `stylis-plugin-rtl` (the default `prefixer` plugin must also be included in order to retain vendor prefixing) and provide that on the top of your application tree.
 The [CacheProvider](https://emotion.sh/docs/cache-provider) component enables this:
 
 ```jsx
@@ -134,7 +134,7 @@ _Use the direction toggle button on the top right corner to flip the whole docum
 
 ## Opting out of rtl transformation
 
-### emotion & styled-components
+### Emotion & styled-components
 
 You have to use the template literal syntax and add the `/* @noflip */` directive before the rule or property for which you want to disable right-to-left styles.
 

docs/data/material/guides/server-rendering/server-rendering.md

@@ -88,8 +88,8 @@ inside a [`CacheProvider`](https://emotion.sh/docs/cache-provider) and [`ThemePr
 
 The key step in server-side rendering is to render the initial HTML of the component **before** we send it to the client-side. To do this, we use [ReactDOMServer.renderToString()](https://reactjs.org/docs/react-dom-server.html).
 
-MUI is using emotion as its default styled engine.
-We need to extract the styles from the emotion instance.
+MUI is using Emotion as its default styled engine.
+We need to extract the styles from the Emotion instance.
 For this, we need to share the same cache configuration for both the client and server:
 
 `createEmotionCache.js`
@@ -102,7 +102,7 @@ export default function createEmotionCache() {
 }
 ```
 
-With this we are creating new emotion cache instance and using this to extract the critical styles for the html as well.
+With this we are creating new Emotion cache instance and using this to extract the critical styles for the html as well.
 
 We will see how this is passed along in the `renderFullPage` function.
 

docs/data/material/guides/understand-mui-packages/understand-mui-packages.md

@@ -96,10 +96,10 @@ These engines come in two packages:
 - `@mui/styled-engine`
 - `@mui/styled-engine-sc`
 
-By default, Material UI uses [emotion](https://emotion.sh/docs/styled) as its styling engine—it's included in the [installation](/material-ui/getting-started/installation/) process.
-If you plan to stick with emotion, then `@mui/styled-engine` is a dependency in your app, and you don't need to install it separately.
+By default, Material UI uses [Emotion](https://emotion.sh/docs/styled) as its styling engine—it's included in the [installation](/material-ui/getting-started/installation/) process.
+If you plan to stick with Emotion, then `@mui/styled-engine` is a dependency in your app, and you don't need to install it separately.
 
-If you prefer to use [styled-components](https://styled-components.com/docs/basics#getting-started), then you need to install `@mui/styled-engine-sc` in place of the emotion packages.
+If you prefer to use [styled-components](https://styled-components.com/docs/basics#getting-started), then you need to install `@mui/styled-engine-sc` in place of the Emotion packages.
 See the [Styled engine guide](/material-ui/guides/styled-engine/) for more details.
 
 In either case, you won't interact much with either of these packages beyond installation—they're used internally in `@mui/system`.
@@ -113,7 +113,7 @@ Check out [the guide to migrating from v4 to v5](/material-ui/migration/migratio
 ### MUI System
 
 MUI System is a collection of CSS utilities to help you rapidly lay out custom designs.
-It uses the emotion adapter (`@mui/styled-engine`) as the default style engine to create the CSS utilities.
+It uses the Emotion adapter (`@mui/styled-engine`) as the default style engine to create the CSS utilities.
 
 #### Advantages of MUI System
 
@@ -122,7 +122,7 @@ It uses the emotion adapter (`@mui/styled-engine`) as the default style engine t
 - You can have themeable components by using `styled` via slots and variants.
 
 :::warning
-To use MUI System, you must install either emotion or styled-components, because the respective `styled-engine` package depends on it.
+To use MUI System, you must install either Emotion or styled-components, because the respective `styled-engine` package depends on it.
 :::
 
 <img src="/static/images/packages/mui-system.png" style="width: 796px; margin-top: 4px; margin-bottom: 8px;" alt="A diagram showing an arrow going from @mui/system to @mui/styled-engine, with a note that it is the default engine. Then, from @mui/styled-engine a solid arrow points to @emotion/react and @emotion/styled while a dashed arrow points to @mui/styled-engine-sc, which points to styled-components." />

docs/data/material/migration/migration-v4/migration-v4-zh.md

@@ -2835,9 +2835,9 @@ The following will not correctly apply the style to the delete icon:
 
 ## Troubleshooting
 
-### Storybook emotion with v5
+### Storybook Emotion with v5
 
-If your project uses Storybook v6.x, you will need to update `.storybook/main.js` webpack config to use the most recent version of emotion.
+If your project uses Storybook v6.x, you will need to update `.storybook/main.js` webpack config to use the most recent version of Emotion.
 
 ```js
 // .storybook/main.js

docs/data/material/migration/migration-v4/v5-style-changes.md

@@ -175,7 +175,7 @@ import { StyledEngineProvider } from '@mui/material/styles';
 
 export default function GlobalCssPriority() {
   return (
-    {/* Inject emotion before JSS */}
+    {/* Inject Emotion before JSS */}
     <StyledEngineProvider injectFirst>
       {/* Your component tree. Now you can override MUI's styles. */}
     </StyledEngineProvider>

docs/data/styles/advanced/advanced.md

@@ -4,7 +4,7 @@
 
 > ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI.
 > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5.
-> If you don't want to have both emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/basics/) documentation which is the recommended alternative.
+> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/basics/) documentation which is the recommended alternative.
 
 > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://reactjs.org/docs/strict-mode.html) or React 18.
 

docs/data/styles/api/api.md

@@ -8,7 +8,7 @@ title: Styles API
 
 > ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI.
 > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5.
-> If you don't want to have both emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/basics/) documentation which is the recommended alternative.
+> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/basics/) documentation which is the recommended alternative.
 
 > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://reactjs.org/docs/strict-mode.html) or React 18.
 

docs/data/styles/basics/basics.md

@@ -4,7 +4,7 @@
 
 > ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI.
 > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5.
-> If you don't want to have both emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/basics/) documentation which is the recommended alternative.
+> If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/basics/) documentation which is the recommended alternative.
 
 > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://reactjs.org/docs/strict-mode.html) or React 18.
 
@@ -18,7 +18,7 @@ In previous versions, MUI has used [Less](https://lesscss.org/), and then a cust
 [A _CSS-in-JS_ solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes many of those limitations,
 and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.).
 
-MUI's styling solution is inspired by many other styling libraries such as [styled-components](https://styled-components.com/) and [emotion](https://emotion.sh/).
+MUI's styling solution is inspired by many other styling libraries such as [styled-components](https://styled-components.com/) and [Emotion](https://emotion.sh/).
 
 - 💅 You can expect [the same advantages](https://styled-components.com/docs/basics#motivation) as styled-components.
 

docs/data/system/basics/basics.md

@@ -184,7 +184,7 @@ For more details, visit the [`sx` prop page](/system/the-sx-prop/).
 
 ### Performance tradeoff
 
-The system relies on CSS-in-JS. It works with both emotion and styled-components.
+The system relies on CSS-in-JS. It works with both Emotion and styled-components.
 
 Pros:
 

docs/data/system/styled/styled.md

@@ -96,7 +96,7 @@ export default styled;
 
 ## Difference with the `sx` prop
 
-The `styled` function is an extension of the `styled` utility provided by the underlying style library used – either emotion or styled-components.
+The `styled` function is an extension of the `styled` utility provided by the underlying style library used – either Emotion or styled-components.
 It is guaranteed that it will produce the same output as the `styled` function coming from the style library for the same input.
 
 The [`sx`](/system/the-sx-prop/) prop, on the other hand, is a new way of styling your components, focused on fast customization. `styled` is a function, while `sx` is a prop of the MUI components.