` HTML element.
The other props of the `Typography` component will also be present in props of the `CustomComponent`.
-You can find a code example with the Button and react-router-dom in [these demos](/material-ui/guides/routing/#component-prop).
+You can find a code example with the Button and react-router-dom in [these demos](/material-ui/integrations/routing/#component-prop).
#### Generic
diff --git a/docs/data/material/guides/localization/localization.md b/docs/data/material/guides/localization/localization.md
index 68de0fd02b68bd..db9e0781f86105 100644
--- a/docs/data/material/guides/localization/localization.md
+++ b/docs/data/material/guides/localization/localization.md
@@ -107,4 +107,4 @@ However, Material UI aims to support the [100 most common](https://en.wikipedia.
## RTL Support
Right-to-left languages such as Arabic, Persian, or Hebrew are supported.
-Follow [this guide](/material-ui/guides/right-to-left/) to use them.
+Follow [this guide](/material-ui/customization/right-to-left/) to use them.
diff --git a/docs/data/material/integrations/interoperability/interoperability.md b/docs/data/material/integrations/interoperability/interoperability.md
index 205b303590d51c..f83d0db1908f00 100644
--- a/docs/data/material/integrations/interoperability/interoperability.md
+++ b/docs/data/material/integrations/interoperability/interoperability.md
@@ -290,7 +290,7 @@ export default function GlobalCssSliderDeep() {
### Change the default styled engine
By default, Material UI 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-components guide](/material-ui/guides/styled-components/) or starting with one of the example projects:
+If, however, you would like to use styled-components, you can configure your app by following the [styled-components guide](/material-ui/integrations/styled-components/) or starting with one of the example projects:
@@ -599,11 +599,11 @@ Emotion's **css()** method works seamlessly with Material UI.
### Theme
-It works exactly like styled components. You can [use the same guide](/material-ui/guides/interoperability/#styled-components).
+It works exactly like styled components. You can [use the same guide](/material-ui/integrations/interoperability/#styled-components).
### The `styled()` API
-It works exactly like styled components. You can [use the same guide](/material-ui/guides/interoperability/#styled-components).
+It works exactly like styled components. You can [use the same guide](/material-ui/integrations/interoperability/#styled-components).
## Tailwind CSS
diff --git a/docs/data/material/migration/migration-v4/migrating-from-jss.md b/docs/data/material/migration/migration-v4/migrating-from-jss.md
index 921eaaff70ab90..c6a30a17c6d37d 100644
--- a/docs/data/material/migration/migration-v4/migrating-from-jss.md
+++ b/docs/data/material/migration/migration-v4/migrating-from-jss.md
@@ -191,7 +191,7 @@ This tool is _not_ maintained by MUI.
### 2. Use [tss-react](https://github.com/garronej/tss-react)
:::error
-This API will not work if you are [using `styled-components` as the underlying styling engine in place of `@emotion`](/material-ui/guides/interoperability/#styled-components).
+This API will not work if you are [using `styled-components` as the underlying styling engine in place of `@emotion`](/material-ui/integrations/interoperability/#styled-components).
:::
The API is similar to JSS `makeStyles`, but under the hood, it uses `@emotion/react`.
diff --git a/docs/data/material/migration/migration-v4/v5-style-changes.md b/docs/data/material/migration/migration-v4/v5-style-changes.md
index b8fee757a252e8..2451584aac662c 100644
--- a/docs/data/material/migration/migration-v4/v5-style-changes.md
+++ b/docs/data/material/migration/migration-v4/v5-style-changes.md
@@ -661,7 +661,7 @@ The GitHub icon was reduced in size from 24px to 22px wide to match the size of
## @material-ui/pickers
-We have a [dedicated page](/material-ui/guides/pickers-migration/) for migrating `@material-ui/pickers` to v5.
+We have a [dedicated page](/material-ui/migration/pickers-migration/) for migrating `@material-ui/pickers` to v5.
## System
diff --git a/docs/pages/blog/2021-developer-survey-results.md b/docs/pages/blog/2021-developer-survey-results.md
index 486b5435561a9e..f7fc2ffb9e6c56 100644
--- a/docs/pages/blog/2021-developer-survey-results.md
+++ b/docs/pages/blog/2021-developer-survey-results.md
@@ -807,7 +807,7 @@ Thanks again and until the next survey!
Here is some additional content related to the topics covered throughout this post:
- [How to migrate from v4 to v5](/material-ui/migration/migration-v4/)
-- [Style library interoperability](/material-ui/guides/interoperability/)
+- [Style library interoperability](/material-ui/integrations/interoperability/)
- [Approaches to customizing Material UI components](/material-ui/customization/how-to-customize/)
Lastly, check out the last two iterations on the MUI Developer Survey:
diff --git a/docs/pages/blog/2021-q2-update.md b/docs/pages/blog/2021-q2-update.md
index c188c9478a9774..4dabbb9070a25e 100644
--- a/docs/pages/blog/2021-q2-update.md
+++ b/docs/pages/blog/2021-q2-update.md
@@ -38,7 +38,7 @@ Here are the most significant improvements since March 2021.
- 👩🎤 We have rolled out the new **style engine** to all the components.
The community provided invaluable assistance in completing this effort.
In v5, we have standardized on the `styled()` API as the styling foundation we build on top of, and introduced the [the `sx` prop](https://mui.com/system/getting-started/the-sx-prop/) for one-off customizations.
- The `styled()` API is loved by the community, and implemented by a number of styling libraries: styled-components, emotion, stitches, goober, etc. It allows us to support them all with [adapters](https://mui.com/material-ui/guides/styled-components/).
+ The `styled()` API is loved by the community, and implemented by a number of styling libraries: styled-components, emotion, stitches, goober, etc. It allows us to support them all with [adapters](https://mui.com/material-ui/integrations/styled-components/).
- ⚒️ We added a [codemod CLI](https://github.com/mui/material-ui/tree/HEAD/packages/mui-codemod) and 17 transformations (so far) to automatically migrate codebases from v4 to v5.
If you're not familiar with what a codemod is, check out [Effective Refactoring with Codemods by Edd Yerburgh](https://www.youtube.com/watch?v=H9qtLutnT_g).
diff --git a/docs/pages/blog/material-ui-v1-is-out.md b/docs/pages/blog/material-ui-v1-is-out.md
index 690ea2b2e021f4..9c21a5b8d5ac9e 100644
--- a/docs/pages/blog/material-ui-v1-is-out.md
+++ b/docs/pages/blog/material-ui-v1-is-out.md
@@ -33,7 +33,7 @@ We want Material UI to become whatever is generally useful for application devel
- **CSS-in-JS**. We have seen [a great potential for **inline-styles** in the past](https://github.com/mui/material-ui/issues/30). It was an opportunity to solve four problems at once: removing the LESS toolchain dependency, allowing dynamic styles, allowing style code splitting and make overrides simpler.
Unfortunately, the **[execution didn't deliver](https://github.com/mui/material-ui/issues/4066)**. We were lacking key features only available in CSS: media queries, pseudo selectors, pseudo elements, browser prefixes. Debugging was much harder. Overriding styles was very challenging – developers always had to look the implementation, and couldn't use CSS without relying on !important.
- Two years ago, we decided to move away [from inline-styles toward **CSS-in-JS**](https://github.com/oliviertassinari/a-journey-toward-better-style). We are very happy with the outcome. We would like to thank [@kof](https://github.com/kof) for the awesome work he has done with [JSS](https://github.com/cssinjs/jss), the internal solution we use. It's allowing us to be [interoperable](/material-ui/guides/interoperability/) with all the other styling solutions.
+ Two years ago, we decided to move away [from inline-styles toward **CSS-in-JS**](https://github.com/oliviertassinari/a-journey-toward-better-style). We are very happy with the outcome. We would like to thank [@kof](https://github.com/kof) for the awesome work he has done with [JSS](https://github.com/cssinjs/jss), the internal solution we use. It's allowing us to be [interoperable](/material-ui/integrations/interoperability/) with all the other styling solutions.
- **Theme**. You can't have a good customizability story without a good theming story. We have been redesigning the theme. It's a [JavaScript object](/material-ui/customization/default-theme/) that contains all the variables and utility functions you might need to style your components: a palette, a typography, breakpoints helpers, transition helpers, etc.
The theme object can be dynamic and nested.
diff --git a/docs/pages/blog/mui-core-v5.md b/docs/pages/blog/mui-core-v5.md
index a1a56a96af0831..8956c8d0e8809c 100644
--- a/docs/pages/blog/mui-core-v5.md
+++ b/docs/pages/blog/mui-core-v5.md
@@ -126,7 +126,7 @@ After [exploring](https://github.com/mui/material-ui/issues/22342) many differen
- If you are using a different styling library, feel free to contribute a wrapper. For instance, there is [one attempt with goober](https://github.com/mui/material-ui/pull/27776), a library obsessing on bundle size (3kB gzipped).
This allows developers to swap between different style engines. For example, styled-components users no longer need to bundle Emotion **and** styled-component, nor do they need to configure the server-side rendering for each.
- How does the [swap work](https://mui.com/material-ui/guides/styled-components/)? The same way it does from React to Preact.
+ How does the [swap work](https://mui.com/material-ui/integrations/styled-components/)? The same way it does from React to Preact.
3. For the last couple of months, we have been [sponsoring](https://opencollective.com/emotion) Emotion with a $100/month grant. We are now increasing this amount to $1,000/month. It's in our best interest to help ensure the library keeps pushing the envelope, leading the state of the art in a competitive space.
diff --git a/docs/public/_redirects b/docs/public/_redirects
index 8434c880d8d00c..34c213b6c0ed59 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -493,7 +493,7 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301!
/material-ui/react-tree-view/ /x/react-tree-view/ 301
/material-ui/api/tree-view/ /x/api/tree-view/tree-view/ 301
/material-ui/api/tree-item/ /x/api/tree-view/tree-item/ 301
-/material-ui/guides/styled-engine/ /material-ui/guides/styled-components/ 301
+/material-ui/guides/styled-engine/ /material-ui/integrations/styled-components/ 301
/material-ui/guides/themeable-component/ /material-ui/guides/creating-themed-components/ 301
/material-ui/guides/next-js-app-router/ /material-ui/guides/nextjs/ 301
/material-ui/guides/understand-mui-packages/ /blog/mui-product-comparison/ 301
diff --git a/docs/translations/translations.json b/docs/translations/translations.json
index 2ef0a8ec01a93d..60e8ed89987ee4 100644
--- a/docs/translations/translations.json
+++ b/docs/translations/translations.json
@@ -32,7 +32,7 @@
"name": "Name",
"nativeElement": "native",
"overrideStyles": "You can override the style of the component using one of these customization options:\n",
- "overrideStylesStyledComponent": "",
+ "overrideStylesStyledComponent": "",
"pageDescription": "API reference docs for the React {{name}} component. Learn about the props, CSS, and other APIs of this exported module.",
"props": "Props",
"parameters": "Parameters",
diff --git a/examples/material-ui-cra-ts/README.md b/examples/material-ui-cra-ts/README.md
index 577adbea405392..58c2af305425dc 100644
--- a/examples/material-ui-cra-ts/README.md
+++ b/examples/material-ui-cra-ts/README.md
@@ -30,7 +30,7 @@ or:
This example demonstrates how you can use Material UI with [Create React App](https://github.com/facebookincubator/create-react-app) in [TypeScript](https://github.com/Microsoft/TypeScript).
It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5.
-If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).
+If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components).
## What's next?
diff --git a/examples/material-ui-cra/README.md b/examples/material-ui-cra/README.md
index defa3f413985df..0f0644799a50a1 100644
--- a/examples/material-ui-cra/README.md
+++ b/examples/material-ui-cra/README.md
@@ -32,7 +32,7 @@ or:
This example demonstrates how you can use [Create React App](https://github.com/facebookincubator/create-react-app) with Material UI.
It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5.
-If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).
+If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components).
## What's next?
diff --git a/examples/material-ui-express-ssr/README.md b/examples/material-ui-express-ssr/README.md
index 3b6a03bfa72209..2197677e60e264 100644
--- a/examples/material-ui-express-ssr/README.md
+++ b/examples/material-ui-express-ssr/README.md
@@ -31,7 +31,7 @@ or:
This is the reference implementation of the [Server Rendering tutorial](https://mui.com/material-ui/guides/server-rendering/).
The example project includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5.
-If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).
+If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components).
## What's next?
diff --git a/examples/material-ui-gatsby/README.md b/examples/material-ui-gatsby/README.md
index c0d9a6a5f590fa..ee350fe7ad68c6 100644
--- a/examples/material-ui-gatsby/README.md
+++ b/examples/material-ui-gatsby/README.md
@@ -22,7 +22,7 @@ npm run develop
The project uses [Gatsby](https://github.com/gatsbyjs/gatsby), which is a static site generator for React.
It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5.
-If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).
+If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components).
## What's next?
diff --git a/examples/material-ui-nextjs-pages-router-ts/README.md b/examples/material-ui-nextjs-pages-router-ts/README.md
index 26e31cc5db4faf..9aba2c5efda7d6 100644
--- a/examples/material-ui-nextjs-pages-router-ts/README.md
+++ b/examples/material-ui-nextjs-pages-router-ts/README.md
@@ -33,12 +33,12 @@ As of Next.js 13.4, the newer App Router pattern is stable.
We recommend starting new projects with the [Material UI with Next.js (App Router) example](https://github.com/mui/material-ui/tree/master/examples/material-ui-nextjs-ts) unless you need (or prefer) the Pages Router.
The project uses [Next.js](https://github.com/vercel/next.js), which is a framework for server-rendered React apps.
-It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).
+It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components).
## The link component
The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with Material UI.
-More information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js-pages-router).
+More information [in the documentation](https://mui.com/material-ui/integrations/routing/#next-js-pages-router).
## What's next?
diff --git a/examples/material-ui-nextjs-pages-router/README.md b/examples/material-ui-nextjs-pages-router/README.md
index 190b474fa73b03..41a92c96514456 100644
--- a/examples/material-ui-nextjs-pages-router/README.md
+++ b/examples/material-ui-nextjs-pages-router/README.md
@@ -34,12 +34,12 @@ We recommend starting new projects with the [Material UI with Next.js (App Route
The project uses [Next.js](https://github.com/vercel/next.js), which is a framework for server-rendered React apps.
It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5.
-If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).
+If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components).
## The Link component
The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/pages/api-reference/components/link) with Material UI.
-More information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js-pages-router).
+More information [in the documentation](https://mui.com/material-ui/integrations/routing/#next-js-pages-router).
## What's next?
diff --git a/examples/material-ui-nextjs-ts-v4-v5-migration/README.md b/examples/material-ui-nextjs-ts-v4-v5-migration/README.md
index 0780e4c7b57ffe..34e4e13f7c217b 100644
--- a/examples/material-ui-nextjs-ts-v4-v5-migration/README.md
+++ b/examples/material-ui-nextjs-ts-v4-v5-migration/README.md
@@ -29,7 +29,7 @@ or:
## The idea behind the example
The project uses [Next.js](https://github.com/vercel/next.js), which is a framework for server-rendered React apps.
-It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).
+It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5. If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components).
It also includes `@mui/styles`, the legacy styling solution that uses JSS as an engine.
It provides all the necessary config for working with both Emotion and JSS for server-side rendering.
The project is intended as a basic starter for migrating your application from v4 to v5, as it lets the JSS style overrides take precedence over the default styles passed to the components by Emotion.
@@ -39,4 +39,4 @@ It demonstrates what results after handling v5's breaking changes to the [theme]
Next.js Pages Router has [a custom Link component](https://nextjs.org/docs/pages/api-reference/components/link).
The example folder provides adapters for usage with Material UI.
-You can find more information [in the documentation](https://mui.com/material-ui/guides/routing/#next-js-pages-router).
+You can find more information [in the documentation](https://mui.com/material-ui/integrations/routing/#next-js-pages-router).
diff --git a/examples/material-ui-preact/README.md b/examples/material-ui-preact/README.md
index fbd43cfbc958e8..aecfebbbe6ffd5 100644
--- a/examples/material-ui-preact/README.md
+++ b/examples/material-ui-preact/README.md
@@ -28,7 +28,7 @@ It includes `@mui/material` and its peer dependencies, including [Emotion](https
-If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).
+If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components).
## What's next?
diff --git a/examples/material-ui-remix-ts/README.md b/examples/material-ui-remix-ts/README.md
index b86ea55611d715..c5e9e0fc0c3f19 100644
--- a/examples/material-ui-remix-ts/README.md
+++ b/examples/material-ui-remix-ts/README.md
@@ -30,7 +30,7 @@ or:
The project uses [Remix](https://remix.run/), which is a full stack web framework.
It includes `@mui/material` and its peer dependencies, including [Emotion](https://emotion.sh/docs/introduction), the default style engine in Material UI v5.
-If you prefer, you can [use styled-components instead](https://mui.com/material-ui/guides/interoperability/#styled-components).
+If you prefer, you can [use styled-components instead](https://mui.com/material-ui/integrations/interoperability/#styled-components).
## What's next?
diff --git a/packages/mui-styled-engine-sc/README.md b/packages/mui-styled-engine-sc/README.md
index 5e894fd4d42f80..871bccbd80d746 100644
--- a/packages/mui-styled-engine-sc/README.md
+++ b/packages/mui-styled-engine-sc/README.md
@@ -7,4 +7,4 @@ It's designed for developers who would like to use `styled-components` as the ma
-Visit [https://mui.com/material-ui/guides/styled-components/](https://mui.com/material-ui/guides/styled-components/) to view the full documentation.
+Visit [https://mui.com/material-ui/integrations/styled-components/](https://mui.com/material-ui/integrations/styled-components/) to view the full documentation.
diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json
index cb31592fd47a55..c0132075c25c5f 100644
--- a/packages/mui-styled-engine-sc/package.json
+++ b/packages/mui-styled-engine-sc/package.json
@@ -20,7 +20,7 @@
"bugs": {
"url": "https://github.com/mui/material-ui/issues"
},
- "homepage": "https://mui.com/material-ui/guides/styled-components/",
+ "homepage": "https://mui.com/material-ui/integrations/styled-components/",
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/mui-org"
diff --git a/packages/mui-styled-engine/README.md b/packages/mui-styled-engine/README.md
index 083e5a7a20ab3b..ab3d9fd2a968da 100644
--- a/packages/mui-styled-engine/README.md
+++ b/packages/mui-styled-engine/README.md
@@ -8,4 +8,4 @@ It is used internally in the `@mui/system` package.
-Visit [https://mui.com/material-ui/guides/styled-components/](https://mui.com/material-ui/guides/styled-components/) to view the full documentation.
+Visit [https://mui.com/material-ui/integrations/styled-components/](https://mui.com/material-ui/integrations/styled-components/) to view the full documentation.
From a22d910fb824198ec4a332b581b3c1765373cfcd Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 22 Jan 2024 22:17:42 -0300
Subject: [PATCH 13/25] adding redirects for pages that changed their URLs
---
docs/public/_redirects | 10 ++++++++++
1 file changed, 10 insertions(+)
diff --git a/docs/public/_redirects b/docs/public/_redirects
index 34c213b6c0ed59..eefb6e4b7b38de 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -497,6 +497,16 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301!
/material-ui/guides/themeable-component/ /material-ui/guides/creating-themed-components/ 301
/material-ui/guides/next-js-app-router/ /material-ui/guides/nextjs/ 301
/material-ui/guides/understand-mui-packages/ /blog/mui-product-comparison/ 301
+# 2024
+/material-ui/guides/creating-themed-components/ /material-ui/integrations/nextjs/ 301
+/material-ui/guides/nextjs/ /material-ui/integrations/nextjs/ 301
+/material-ui/guides/interoperability/ /material-ui/integrations/interoperability/ 301
+/material-ui/guides/theme-scoping/ /material-ui/integrations/theme-scoping/ 301
+/material-ui/guides/routing/ /material-ui/integrations/routing/ 301
+/material-ui/guides/creating-themed-components/ /material-ui/customization/creating-themed-components/ 301
+/material-ui/guides/shadow-dom/ /material-ui/customization/shadow-dom/ 301
+/material-ui/guides/right-to-left/ /material-ui/customization/right-to-left/ 301
+/material-ui/guides/pickers-migration/ /material-ui/migration/pickers-migration/ 301
# Proxies
From d70ad28a9c13b81311115b3b55934296beec0881 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 24 Jan 2024 19:07:21 -0300
Subject: [PATCH 14/25] add the RtlDemo to the list of ignored demos
---
test/regressions/index.js | 1 +
1 file changed, 1 insertion(+)
diff --git a/test/regressions/index.js b/test/regressions/index.js
index f90110569c9c78..d538f1e10d907c 100644
--- a/test/regressions/index.js
+++ b/test/regressions/index.js
@@ -132,6 +132,7 @@ const blacklist = [
'docs-customization-density/DensityTool.png', // Redux isolation
'docs-customization-transitions/TransitionHover.png', // Need interaction
'docs-customization-typography/ResponsiveFontSizesChart.png',
+ 'docs-customization-right-to-left/RtlDemo.png',
'docs-discover-more-languages', // No public components
'docs-discover-more-showcase', // No public components
'docs-discover-more-team', // No public components
From dfda22a4d8db8583f84cbac38b973e1c0977c274 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 24 Jan 2024 19:14:30 -0300
Subject: [PATCH 15/25] try to make vale happy
---
.../material/customization/theming/theming.md | 8 +--
docs/data/material/getting-started/faq/faq.md | 28 ++++----
.../interoperability/interoperability.md | 72 +++++++++----------
3 files changed, 54 insertions(+), 54 deletions(-)
diff --git a/docs/data/material/customization/theming/theming.md b/docs/data/material/customization/theming/theming.md
index f484fdca997ddf..23b705b2fa58f2 100644
--- a/docs/data/material/customization/theming/theming.md
+++ b/docs/data/material/customization/theming/theming.md
@@ -1,6 +1,6 @@
# Theming
-Customize Material UI with your theme. You can change the colors, the typography and much more.
+Customize Material UI with your theme. You can change the colors, the typography and much more.
The theme specifies the color of the components, darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc.
@@ -11,14 +11,14 @@ To promote greater consistency between apps, light and dark theme types are avai
## Theme provider
If you wish to customize the theme, you need to use the `ThemeProvider` component in order to inject a theme into your application.
-However, this is optional; Material UI components come with a default theme.
+However, this is optional; Material UI components come with a default theme.
`ThemeProvider` relies on the [context feature of React](https://react.dev/learn/passing-data-deeply-with-context) to pass the theme down to the components, so you need to make sure that `ThemeProvider` is a parent of the components you are trying to customize.
You can learn more about this in [the API section](#themeprovider).
## Theme configuration variables
-Changing the theme configuration variables is the most effective way to match Material UI to your needs.
+Changing the theme configuration variables is the most effective way to match Material UI to your needs.
The following sections cover the most important theme variables:
- [`.palette`](/material-ui/customization/palette/)
@@ -87,7 +87,7 @@ To add extra variables to the `theme.palette`, see [palette customization](/mate
The community has built great tools to build a theme:
-- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the Material UI component library. Includes basic site templates to show various components and how they are affected by the theme
+- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the Material UI component library. Includes basic site templates to show various components and how they are affected by the theme
- [Material palette generator](https://m2.material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input.
## Accessing the theme in a component
diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md
index dd919119b277bd..e4ff64383eab41 100644
--- a/docs/data/material/getting-started/faq/faq.md
+++ b/docs/data/material/getting-started/faq/faq.md
@@ -19,14 +19,14 @@ There are many ways to support us:
- Review and comment on existing [pull requests](https://github.com/mui/material-ui/pulls) and [issues](https://github.com/mui/material-ui/issues).
- [Improve our documentation](https://github.com/mui/material-ui/tree/HEAD/docs), fix bugs, or add features by [submitting a pull request](https://github.com/mui/material-ui/pulls).
- **Support us financially on [Open Collective](https://opencollective.com/mui-org)**.
- If you use Material UI in a commercial project and would like to support its continued development by becoming a Sponsor, or in a side or hobby project and would like to become a Backer, you can do so through Open Collective.
+ If you use Material UI in a commercial project and would like to support its continued development by becoming a Sponsor, or in a side or hobby project and would like to become a Backer, you can do so through Open Collective.
All funds donated are managed transparently, and Sponsors receive recognition in the README and on the homepage.
## Why do the fixed positioned elements move when a modal is opened?
Scrolling is blocked as soon as a modal is opened.
This prevents interacting with the background when the modal should be the only interactive content. However, removing the scrollbar can make your **fixed positioned elements** move.
-In this situation, you can apply a global `.mui-fixed` class name to tell Material UI to handle those elements.
+In this situation, you can apply a global `.mui-fixed` class name to tell Material UI to handle those elements.
## How can I disable the ripple effect globally?
@@ -51,7 +51,7 @@ const theme = createTheme({
## How can I disable transitions globally?
-Material UI uses the same theme helper for creating all its transitions.
+Material UI uses the same theme helper for creating all its transitions.
Therefore you can disable all transitions by overriding the helper in your theme:
```js
@@ -104,7 +104,7 @@ If you choose not to use it, you can still disable transitions and animations by
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.
-Perhaps, however, you're adding some Material UI components to an app that already uses another styling solution,
+Perhaps, however, you're adding some Material UI 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
[Style library interoperability](/material-ui/integrations/interoperability/) section,
where we show how simple it is to restyle Material UI components with alternative style libraries.
@@ -125,9 +125,9 @@ We detail the [integration with third-party routing libraries](/material-ui/inte
## How can I access the DOM element?
-All Material UI components that should render something in the DOM forward their
+All Material UI components that should render something in the DOM forward their
ref to the underlying DOM component. This means that you can get DOM elements
-by reading the ref attached to Material UI components:
+by reading the ref attached to Material UI components:
```jsx
// or a ref setter function
@@ -138,7 +138,7 @@ const ref = React.createRef();
const element = ref.current;
```
-If you're not sure if the Material UI component in question forwards its ref you can check the API documentation under "Props".
+If you're not sure if the Material UI component in question forwards its ref you can check the API documentation under "Props".
You should find the message below, like in the [Button API](/material-ui/api/button/#props), [Button API](/material-ui/api/button/#props)
> The ref is forwarded to the root element.
@@ -154,13 +154,13 @@ Check out the [reference implementations](/material-ui/guides/server-rendering/#
## Why are the colors I am seeing different from what I see here?
The documentation site is using a custom theme. Hence, the color palette is
-different from the default theme that Material UI ships. Please refer to [this
+different from the default theme that Material UI ships. Please refer to [this
page](/material-ui/customization/theming/) to learn about theme customization.
## Why does component X require a DOM node in a prop instead of a ref object?
Components like the [Portal](/base-ui/react-portal/components-api/) or [Popper](/material-ui/api/popper/#props) require a DOM node in the `container` or `anchorEl` prop respectively.
-It seems convenient to simply pass a ref object in those props and let Material UI access the current value.
+It seems convenient to simply pass a ref object in those props and let Material UI access the current value.
This works in a simple scenario:
@@ -324,13 +324,13 @@ If you have several applications running on one page, consider using one @mui/st
## [legacy] Why aren't my components rendering correctly in production builds?
The #1 reason this happens is likely due to class name conflicts once your code is in a production bundle.
-For Material UI to work, the `className` values of all components on a page must be generated by a single instance of the [class name generator](/system/styles/advanced/#class-names).
+For Material UI to work, the `className` values of all components on a page must be generated by a single instance of the [class name generator](/system/styles/advanced/#class-names).
To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** among them.
You could end up accidentally using two class name generators in a variety of scenarios:
-- You accidentally **bundle** two versions of `@mui/styles`. You might have a dependency not correctly setting Material UI as a peer dependency.
+- You accidentally **bundle** two versions of `@mui/styles`. You might have a dependency not correctly setting Material UI as a peer dependency.
- You are using `StylesProvider` for a **subset** of your React tree.
- You are using a bundler and it is splitting code in a way that causes multiple class name generator instances to be created.
@@ -338,7 +338,7 @@ You could end up accidentally using two class name generators in a variety of sc
If you are using Webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk).
:::
-Overall, it's simple to recover from this problem by wrapping each Material UI application with [`StylesProvider`](/system/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared among them**.
+Overall, it's simple to recover from this problem by wrapping each Material UI application with [`StylesProvider`](/system/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared among them**.
### [legacy] CSS works only on first load and goes missing
@@ -401,11 +401,11 @@ This generator needs to behave identically on the server and on the client. For
const html = ReactDOMServer.renderToString(
```
-- You need to verify that your client and server are running the **exactly the same version** of Material UI.
+- You need to verify that your client and server are running the **exactly the same version** of Material UI.
It is possible that a mismatch of even minor versions can cause styling problems.
To check version numbers, run `npm list @mui/styles` in the environment where you build your application and also in your deployment environment.
- You can also ensure the same version in different environments by specifying a specific Material UI version in the dependencies of your package.json.
+ You can also ensure the same version in different environments by specifying a specific Material UI version in the dependencies of your package.json.
_example of fix (package.json):_
diff --git a/docs/data/material/integrations/interoperability/interoperability.md b/docs/data/material/integrations/interoperability/interoperability.md
index 04134ff114969f..f83d0db1908f00 100644
--- a/docs/data/material/integrations/interoperability/interoperability.md
+++ b/docs/data/material/integrations/interoperability/interoperability.md
@@ -1,6 +1,6 @@
# Style library interoperability
-While you can use the Emotion-based styling solution provided by Material UI, you can also use the one you already know, from plain CSS to styled-components.
+While you can use the Emotion-based styling solution provided by Material UI, you can also use the one you already know, from plain CSS to styled-components.
This guide aims to document the most popular alternatives,
but you should find that the principles applied here can be adapted to other libraries.
@@ -53,7 +53,7 @@ export default function PlainCssSlider() {
### CSS injection order ⚠️
-**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
+**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
```jsx
import * as React from 'react';
@@ -62,13 +62,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
export default function GlobalCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
```
-**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from Material UI. 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 Material UI. 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';
@@ -83,7 +83,7 @@ const cache = createCache({
export default function PlainCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
@@ -95,7 +95,7 @@ export default function PlainCssPriority() {
If you attempt to style the Slider,
you will likely need to affect some of the Slider's child elements, for example the thumb.
-In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself.
@@ -176,7 +176,7 @@ export default function PlainCssSliderDeep2() {
## Global CSS
Explicitly providing the class names to the component is too much effort?
-[You can target the class names generated by Material UI](/system/styles/advanced/).
+[You can target the class names generated by Material UI](/system/styles/advanced/).
[](https://codesandbox.io/p/sandbox/global-classnames-dho8k)
@@ -206,7 +206,7 @@ export default function GlobalCssSlider() {
### CSS injection order ⚠️
-**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
+**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
```jsx
import * as React from 'react';
@@ -215,13 +215,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
export default function GlobalCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
```
-**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from Material UI. 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 Material UI. 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';
@@ -236,7 +236,7 @@ const cache = createCache({
export default function GlobalCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
@@ -248,7 +248,7 @@ export default function GlobalCssPriority() {
If you attempt to style the Slider,
you will likely need to affect some of the Slider's child elements, for example the thumb.
-In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
The following example overrides the slider's `thumb` style in addition to the custom styles on the slider itself.
@@ -328,7 +328,7 @@ export default function StyledComponents() {
If you attempt to style the Slider,
you will likely need to affect some of the Slider's child elements, for example the thumb.
-In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself.
@@ -367,18 +367,18 @@ export default function StyledComponentsDeep2() {
### Theme
-By using the Material UI theme provider, the theme will be available in the theme context
+By using the Material UI theme provider, the theme will be available in the theme context
of the styled engine too (Emotion or styled-components, depending on your configuration).
:::warning
If you are already using a custom theme with styled-components or Emotion,
-it might not be compatible with Material UI's theme specification. If it's not
-compatible, you need to render Material UI's ThemeProvider first. This will
+it might not be compatible with Material UI's theme specification. If it's not
+compatible, you need to render Material UI's ThemeProvider first. This will
ensure the theme structures are isolated. This is ideal for the progressive adoption
-of Material UI's components in the codebase.
+of Material UI's components in the codebase.
:::
-You are encouraged to share the same theme object between Material UI and the rest of your project.
+You are encouraged to share the same theme object between Material UI and the rest of your project.
```jsx
const CustomizedSlider = styled(Slider)(
@@ -463,7 +463,7 @@ export default function CssModulesSlider() {
### CSS injection order ⚠️
-**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
+**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
```jsx
import * as React from 'react';
@@ -472,13 +472,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
export default function GlobalCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
```
-**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from Material UI. 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 Material UI. 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';
@@ -493,7 +493,7 @@ const cache = createCache({
export default function CssModulesPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
@@ -505,8 +505,8 @@ export default function CssModulesPriority() {
If you attempt to style the Slider,
you will likely need to affect some of the Slider's child elements, for example the thumb.
-In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
-It's important to keep in mind that CSS Modules adds an unique id to each class, and that id won't be present on the Material UI provided children class. To escape from that, CSS Modules provides a functionality, the `:global` selector.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+It's important to keep in mind that CSS Modules adds an unique id to each class, and that id won't be present on the Material UI provided children class. To escape from that, CSS Modules provides a functionality, the `:global` selector.
The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself.
@@ -593,7 +593,7 @@ export default function CssModulesSliderDeep2() {
### The `css` prop
-Emotion's **css()** method works seamlessly with Material UI.
+Emotion's **css()** method works seamlessly with Material UI.
{{"demo": "EmotionCSS.js", "defaultCodeOpen": true}}
@@ -612,11 +612,11 @@ It works exactly like styled components. You can [use the same guide](/material-
### Setup
-If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) example project.
+If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) example project.
If you use a different framework, or already have set up your project, follow these steps:
1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation.
-2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the Material UI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)).
+2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the Material UI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)).
**tailwind.config.js**
@@ -646,12 +646,12 @@ If you use a different framework, or already have set up your project, follow th
```
-Most of the CSS used by Material UI has as specificity of 1, hence this `important` property is unnecessary.
-However, in a few edge cases, Material UI uses nested CSS selectors that win over Tailwind CSS.
+Most of the CSS used by Material UI has as specificity of 1, hence this `important` property is unnecessary.
+However, in a few edge cases, Material UI uses nested CSS selectors that win over Tailwind CSS.
Use this step to help ensure that the [deeper elements](#deeper-elements-5) can always be customized using Tailwind's utility classes.
More details on this option can be found here https://tailwindcss.com/docs/configuration#selector-strategy
-4. Fix the CSS injection order. Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over Tailwind CSS. To reduce the need for the `important` property, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
+4. Fix the CSS injection order. Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over Tailwind CSS. To reduce the need for the `important` property, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
```jsx
import * as React from 'react';
@@ -660,13 +660,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
export default function GlobalCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
```
-**Note:** If you are using Emotion and have a custom cache in your app, it will override the one coming from Material UI. 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 Material UI. 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';
@@ -681,7 +681,7 @@ const cache = createCache({
export default function PlainCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
@@ -731,7 +731,7 @@ root.render(
### Usage
-Now it's all set up and you can start using Tailwind CSS on the Material UI components!
+Now it's all set up and you can start using Tailwind CSS on the Material UI components!
{{"demo": "StyledComponents.js", "hideToolbar": true}}
@@ -799,10 +799,10 @@ export default function SliderThumbOverrides() {
## ~~JSS~~ TSS
-[JSS](https://cssinjs.org/) itself is no longer supported in Material UI, however,
+[JSS](https://cssinjs.org/) itself is no longer supported in Material UI, however,
if you like the hook-based API (`makeStyles` → `useStyles`) that [`react-jss`](https://codesandbox.io/p/sandbox/j3l06yyqpw) was offering you can opt for [`tss-react`](https://github.com/garronej/tss-react).
-[TSS](https://docs.tss-react.dev) integrates well with Material UI and provide a better
+[TSS](https://docs.tss-react.dev) integrates well with Material UI and provide a better
TypeScript support than JSS.
:::info
From c0c03114414c675dec56ecbd2da621423bb24387 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Wed, 24 Jan 2024 20:26:32 -0300
Subject: [PATCH 16/25] try to make vale happy again
---
.../interoperability/interoperability.md | 74 +++++++++----------
1 file changed, 37 insertions(+), 37 deletions(-)
diff --git a/docs/data/material/integrations/interoperability/interoperability.md b/docs/data/material/integrations/interoperability/interoperability.md
index f83d0db1908f00..f66a780b5ae475 100644
--- a/docs/data/material/integrations/interoperability/interoperability.md
+++ b/docs/data/material/integrations/interoperability/interoperability.md
@@ -1,6 +1,6 @@
# Style library interoperability
-While you can use the Emotion-based styling solution provided by Material UI, you can also use the one you already know, from plain CSS to styled-components.
+While you can use the Emotion-based styling solution provided by Material UI, you can also use the one you already know, from plain CSS to styled-components.
This guide aims to document the most popular alternatives,
but you should find that the principles applied here can be adapted to other libraries.
@@ -53,7 +53,7 @@ export default function PlainCssSlider() {
### CSS injection order ⚠️
-**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
+**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
```jsx
import * as React from 'react';
@@ -62,13 +62,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
export default function GlobalCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
```
-**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from Material UI. 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 Material UI. 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';
@@ -83,7 +83,7 @@ const cache = createCache({
export default function PlainCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
@@ -95,7 +95,7 @@ export default function PlainCssPriority() {
If you attempt to style the Slider,
you will likely need to affect some of the Slider's child elements, for example the thumb.
-In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself.
@@ -176,7 +176,7 @@ export default function PlainCssSliderDeep2() {
## Global CSS
Explicitly providing the class names to the component is too much effort?
-[You can target the class names generated by Material UI](/system/styles/advanced/).
+[You can target the class names generated by Material UI](/system/styles/advanced/).
[](https://codesandbox.io/p/sandbox/global-classnames-dho8k)
@@ -206,7 +206,7 @@ export default function GlobalCssSlider() {
### CSS injection order ⚠️
-**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
+**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
```jsx
import * as React from 'react';
@@ -215,13 +215,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
export default function GlobalCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
```
-**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from Material UI. 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 Material UI. 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';
@@ -236,7 +236,7 @@ const cache = createCache({
export default function GlobalCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
@@ -248,7 +248,7 @@ export default function GlobalCssPriority() {
If you attempt to style the Slider,
you will likely need to affect some of the Slider's child elements, for example the thumb.
-In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
The following example overrides the slider's `thumb` style in addition to the custom styles on the slider itself.
@@ -289,7 +289,7 @@ export default function GlobalCssSliderDeep() {
### Change the default styled engine
-By default, Material UI components come with Emotion as their style engine.
+By default, Material UI 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-components guide](/material-ui/integrations/styled-components/) or starting with one of the example projects:
@@ -328,7 +328,7 @@ export default function StyledComponents() {
If you attempt to style the Slider,
you will likely need to affect some of the Slider's child elements, for example the thumb.
-In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself.
@@ -367,18 +367,18 @@ export default function StyledComponentsDeep2() {
### Theme
-By using the Material UI theme provider, the theme will be available in the theme context
+By using the Material UI theme provider, the theme will be available in the theme context
of the styled engine too (Emotion or styled-components, depending on your configuration).
:::warning
If you are already using a custom theme with styled-components or Emotion,
-it might not be compatible with Material UI's theme specification. If it's not
-compatible, you need to render Material UI's ThemeProvider first. This will
+it might not be compatible with Material UI's theme specification. If it's not
+compatible, you need to render Material UI's ThemeProvider first. This will
ensure the theme structures are isolated. This is ideal for the progressive adoption
-of Material UI's components in the codebase.
+of Material UI's components in the codebase.
:::
-You are encouraged to share the same theme object between Material UI and the rest of your project.
+You are encouraged to share the same theme object between Material UI and the rest of your project.
```jsx
const CustomizedSlider = styled(Slider)(
@@ -463,7 +463,7 @@ export default function CssModulesSlider() {
### CSS injection order ⚠️
-**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
+**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
```jsx
import * as React from 'react';
@@ -472,13 +472,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
export default function GlobalCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
```
-**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from Material UI. 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 Material UI. 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';
@@ -493,7 +493,7 @@ const cache = createCache({
export default function CssModulesPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
@@ -505,8 +505,8 @@ export default function CssModulesPriority() {
If you attempt to style the Slider,
you will likely need to affect some of the Slider's child elements, for example the thumb.
-In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
-It's important to keep in mind that CSS Modules adds an unique id to each class, and that id won't be present on the Material UI provided children class. To escape from that, CSS Modules provides a functionality, the `:global` selector.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+It's important to keep in mind that CSS Modules adds an unique id to each class, and that id won't be present on the Material UI provided children class. To escape from that, CSS Modules provides a functionality, the `:global` selector.
The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself.
@@ -593,7 +593,7 @@ export default function CssModulesSliderDeep2() {
### The `css` prop
-Emotion's **css()** method works seamlessly with Material UI.
+Emotion's **css()** method works seamlessly with Material UI.
{{"demo": "EmotionCSS.js", "defaultCodeOpen": true}}
@@ -612,11 +612,11 @@ It works exactly like styled components. You can [use the same guide](/material-
### Setup
-If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) example project.
+If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) example project.
If you use a different framework, or already have set up your project, follow these steps:
1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation.
-2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the Material UI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)).
+2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the Material UI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)).
**tailwind.config.js**
@@ -646,12 +646,12 @@ If you use a different framework, or already have set up your project, follow th
```
-Most of the CSS used by Material UI has as specificity of 1, hence this `important` property is unnecessary.
-However, in a few edge cases, Material UI uses nested CSS selectors that win over Tailwind CSS.
+Most of the CSS used by Material UI has as specificity of 1, hence this `important` property is unnecessary.
+However, in a few edge cases, Material UI uses nested CSS selectors that win over Tailwind CSS.
Use this step to help ensure that the [deeper elements](#deeper-elements-5) can always be customized using Tailwind's utility classes.
More details on this option can be found here https://tailwindcss.com/docs/configuration#selector-strategy
-4. Fix the CSS injection order. Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over Tailwind CSS. To reduce the need for the `important` property, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
+4. Fix the CSS injection order. Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over Tailwind CSS. To reduce the need for the `important` property, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
```jsx
import * as React from 'react';
@@ -660,13 +660,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
export default function GlobalCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
```
-**Note:** If you are using Emotion and have a custom cache in your app, it will override the one coming from Material UI. 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 Material UI. 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';
@@ -681,7 +681,7 @@ const cache = createCache({
export default function PlainCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
@@ -731,7 +731,7 @@ root.render(
### Usage
-Now it's all set up and you can start using Tailwind CSS on the Material UI components!
+Now it's all set up and you can start using Tailwind CSS on the Material UI components!
{{"demo": "StyledComponents.js", "hideToolbar": true}}
@@ -799,10 +799,10 @@ export default function SliderThumbOverrides() {
## ~~JSS~~ TSS
-[JSS](https://cssinjs.org/) itself is no longer supported in Material UI, however,
+[JSS](https://cssinjs.org/) itself is no longer supported in Material UI, however,
if you like the hook-based API (`makeStyles` → `useStyles`) that [`react-jss`](https://codesandbox.io/p/sandbox/j3l06yyqpw) was offering you can opt for [`tss-react`](https://github.com/garronej/tss-react).
-[TSS](https://docs.tss-react.dev) integrates well with Material UI and provide a better
+[TSS](https://docs.tss-react.dev) integrates well with Material UI and provide a better
TypeScript support than JSS.
:::info
From 58327ebebaf7d42f823aba6b539f8aa176dd0c2d Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 29 Jan 2024 12:12:41 -0300
Subject: [PATCH 17/25] trying to make Vale happy once again
---
.../material/customization/theming/theming.md | 10 +++----
docs/data/material/getting-started/faq/faq.md | 30 +++++++++----------
.../interoperability/interoperability.md | 2 +-
3 files changed, 21 insertions(+), 21 deletions(-)
diff --git a/docs/data/material/customization/theming/theming.md b/docs/data/material/customization/theming/theming.md
index 23b705b2fa58f2..d6454f16a459bc 100644
--- a/docs/data/material/customization/theming/theming.md
+++ b/docs/data/material/customization/theming/theming.md
@@ -1,6 +1,6 @@
# Theming
-Customize Material UI with your theme. You can change the colors, the typography and much more.
+Customize Material UI with your theme. You can change the colors, the typography and much more.
The theme specifies the color of the components, darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc.
@@ -11,14 +11,14 @@ To promote greater consistency between apps, light and dark theme types are avai
## Theme provider
If you wish to customize the theme, you need to use the `ThemeProvider` component in order to inject a theme into your application.
-However, this is optional; Material UI components come with a default theme.
+However, this is optional; Material UI components come with a default theme.
`ThemeProvider` relies on the [context feature of React](https://react.dev/learn/passing-data-deeply-with-context) to pass the theme down to the components, so you need to make sure that `ThemeProvider` is a parent of the components you are trying to customize.
You can learn more about this in [the API section](#themeprovider).
## Theme configuration variables
-Changing the theme configuration variables is the most effective way to match Material UI to your needs.
+Changing the theme configuration variables is the most effective way to match Material UI to your needs.
The following sections cover the most important theme variables:
- [`.palette`](/material-ui/customization/palette/)
@@ -33,7 +33,7 @@ You can check out the [default theme section](/material-ui/customization/default
### Custom variables
-When using Material UI's theme with [MUI System](/system/getting-started/) or [any other styling solution](/material-ui/integrations/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere.
+When using Material UI's theme with [MUI System](/system/getting-started/) or [any other styling solution](/material-ui/integrations/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere.
For instance:
```jsx
@@ -87,7 +87,7 @@ To add extra variables to the `theme.palette`, see [palette customization](/mate
The community has built great tools to build a theme:
-- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the Material UI component library. Includes basic site templates to show various components and how they are affected by the theme
+- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the Material UI component library. Includes basic site templates to show various components and how they are affected by the theme
- [Material palette generator](https://m2.material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input.
## Accessing the theme in a component
diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md
index e4ff64383eab41..4f9c694ab5b78b 100644
--- a/docs/data/material/getting-started/faq/faq.md
+++ b/docs/data/material/getting-started/faq/faq.md
@@ -19,14 +19,14 @@ There are many ways to support us:
- Review and comment on existing [pull requests](https://github.com/mui/material-ui/pulls) and [issues](https://github.com/mui/material-ui/issues).
- [Improve our documentation](https://github.com/mui/material-ui/tree/HEAD/docs), fix bugs, or add features by [submitting a pull request](https://github.com/mui/material-ui/pulls).
- **Support us financially on [Open Collective](https://opencollective.com/mui-org)**.
- If you use Material UI in a commercial project and would like to support its continued development by becoming a Sponsor, or in a side or hobby project and would like to become a Backer, you can do so through Open Collective.
+ If you use Material UI in a commercial project and would like to support its continued development by becoming a Sponsor, or in a side or hobby project and would like to become a Backer, you can do so through Open Collective.
All funds donated are managed transparently, and Sponsors receive recognition in the README and on the homepage.
## Why do the fixed positioned elements move when a modal is opened?
Scrolling is blocked as soon as a modal is opened.
This prevents interacting with the background when the modal should be the only interactive content. However, removing the scrollbar can make your **fixed positioned elements** move.
-In this situation, you can apply a global `.mui-fixed` class name to tell Material UI to handle those elements.
+In this situation, you can apply a global `.mui-fixed` class name to tell Material UI to handle those elements.
## How can I disable the ripple effect globally?
@@ -51,7 +51,7 @@ const theme = createTheme({
## How can I disable transitions globally?
-Material UI uses the same theme helper for creating all its transitions.
+Material UI uses the same theme helper for creating all its transitions.
Therefore you can disable all transitions by overriding the helper in your theme:
```js
@@ -104,10 +104,10 @@ If you choose not to use it, you can still disable transitions and animations by
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.
-Perhaps, however, you're adding some Material UI components to an app that already uses another styling solution,
+Perhaps, however, you're adding some Material UI 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
[Style library interoperability](/material-ui/integrations/interoperability/) section,
-where we show how simple it is to restyle Material UI components with alternative style libraries.
+where we show how simple it is to restyle Material UI components with alternative style libraries.
## When should I use inline-style vs. CSS?
@@ -125,9 +125,9 @@ We detail the [integration with third-party routing libraries](/material-ui/inte
## How can I access the DOM element?
-All Material UI components that should render something in the DOM forward their
+All Material UI components that should render something in the DOM forward their
ref to the underlying DOM component. This means that you can get DOM elements
-by reading the ref attached to Material UI components:
+by reading the ref attached to Material UI components:
```jsx
// or a ref setter function
@@ -138,7 +138,7 @@ const ref = React.createRef();
const element = ref.current;
```
-If you're not sure if the Material UI component in question forwards its ref you can check the API documentation under "Props".
+If you're not sure if the Material UI component in question forwards its ref you can check the API documentation under "Props".
You should find the message below, like in the [Button API](/material-ui/api/button/#props), [Button API](/material-ui/api/button/#props)
> The ref is forwarded to the root element.
@@ -154,13 +154,13 @@ Check out the [reference implementations](/material-ui/guides/server-rendering/#
## Why are the colors I am seeing different from what I see here?
The documentation site is using a custom theme. Hence, the color palette is
-different from the default theme that Material UI ships. Please refer to [this
+different from the default theme that Material UI ships. Please refer to [this
page](/material-ui/customization/theming/) to learn about theme customization.
## Why does component X require a DOM node in a prop instead of a ref object?
Components like the [Portal](/base-ui/react-portal/components-api/) or [Popper](/material-ui/api/popper/#props) require a DOM node in the `container` or `anchorEl` prop respectively.
-It seems convenient to simply pass a ref object in those props and let Material UI access the current value.
+It seems convenient to simply pass a ref object in those props and let Material UI access the current value.
This works in a simple scenario:
@@ -324,13 +324,13 @@ If you have several applications running on one page, consider using one @mui/st
## [legacy] Why aren't my components rendering correctly in production builds?
The #1 reason this happens is likely due to class name conflicts once your code is in a production bundle.
-For Material UI to work, the `className` values of all components on a page must be generated by a single instance of the [class name generator](/system/styles/advanced/#class-names).
+For Material UI to work, the `className` values of all components on a page must be generated by a single instance of the [class name generator](/system/styles/advanced/#class-names).
To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** among them.
You could end up accidentally using two class name generators in a variety of scenarios:
-- You accidentally **bundle** two versions of `@mui/styles`. You might have a dependency not correctly setting Material UI as a peer dependency.
+- You accidentally **bundle** two versions of `@mui/styles`. You might have a dependency not correctly setting Material UI as a peer dependency.
- You are using `StylesProvider` for a **subset** of your React tree.
- You are using a bundler and it is splitting code in a way that causes multiple class name generator instances to be created.
@@ -338,7 +338,7 @@ You could end up accidentally using two class name generators in a variety of sc
If you are using Webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk).
:::
-Overall, it's simple to recover from this problem by wrapping each Material UI application with [`StylesProvider`](/system/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared among them**.
+Overall, it's simple to recover from this problem by wrapping each Material UI application with [`StylesProvider`](/system/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared among them**.
### [legacy] CSS works only on first load and goes missing
@@ -401,11 +401,11 @@ This generator needs to behave identically on the server and on the client. For
const html = ReactDOMServer.renderToString(
```
-- You need to verify that your client and server are running the **exactly the same version** of Material UI.
+- You need to verify that your client and server are running the **exactly the same version** of Material UI.
It is possible that a mismatch of even minor versions can cause styling problems.
To check version numbers, run `npm list @mui/styles` in the environment where you build your application and also in your deployment environment.
- You can also ensure the same version in different environments by specifying a specific Material UI version in the dependencies of your package.json.
+ You can also ensure the same version in different environments by specifying a specific Material UI version in the dependencies of your package.json.
_example of fix (package.json):_
diff --git a/docs/data/material/integrations/interoperability/interoperability.md b/docs/data/material/integrations/interoperability/interoperability.md
index f66a780b5ae475..21986f85b5a7a1 100644
--- a/docs/data/material/integrations/interoperability/interoperability.md
+++ b/docs/data/material/integrations/interoperability/interoperability.md
@@ -593,7 +593,7 @@ export default function CssModulesSliderDeep2() {
### The `css` prop
-Emotion's **css()** method works seamlessly with Material UI.
+Emotion's `css()` method works seamlessly with Material UI.
{{"demo": "EmotionCSS.js", "defaultCodeOpen": true}}
From 9e4e9f49b9a92d8c2b4353ec1f4799499f0c9b69 Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 29 Jan 2024 12:15:41 -0300
Subject: [PATCH 18/25] missed this MUI System instance
---
docs/data/material/customization/theming/theming.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/material/customization/theming/theming.md b/docs/data/material/customization/theming/theming.md
index d6454f16a459bc..e5079b3d4176ff 100644
--- a/docs/data/material/customization/theming/theming.md
+++ b/docs/data/material/customization/theming/theming.md
@@ -33,7 +33,7 @@ You can check out the [default theme section](/material-ui/customization/default
### Custom variables
-When using Material UI's theme with [MUI System](/system/getting-started/) or [any other styling solution](/material-ui/integrations/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere.
+When using Material UI's theme with [MUI System](/system/getting-started/) or [any other styling solution](/material-ui/integrations/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere.
For instance:
```jsx
From 7d0ea2a1743667796039ba0cf9143650f2cde70e Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 29 Jan 2024 12:18:38 -0300
Subject: [PATCH 19/25] Vale again: punctuation inside quotes
---
docs/data/material/getting-started/faq/faq.md | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md
index 4f9c694ab5b78b..fd6523290a8d48 100644
--- a/docs/data/material/getting-started/faq/faq.md
+++ b/docs/data/material/getting-started/faq/faq.md
@@ -138,7 +138,7 @@ const ref = React.createRef();
const element = ref.current;
```
-If you're not sure if the Material UI component in question forwards its ref you can check the API documentation under "Props".
+If you're not sure if the Material UI component in question forwards its ref you can check the API documentation under "Props."
You should find the message below, like in the [Button API](/material-ui/api/button/#props), [Button API](/material-ui/api/button/#props)
> The ref is forwarded to the root element.
From a75dfc989b56da87df0830af3d40d8170ac0460e Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Mon, 29 Jan 2024 12:40:38 -0300
Subject: [PATCH 20/25] tackle other errors pointed out by Vale
---
docs/data/material/getting-started/faq/faq.md | 15 +++++++--------
1 file changed, 7 insertions(+), 8 deletions(-)
diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md
index fd6523290a8d48..8ca2d5c4470358 100644
--- a/docs/data/material/getting-started/faq/faq.md
+++ b/docs/data/material/getting-started/faq/faq.md
@@ -10,7 +10,7 @@ There are many ways to support us:
- **Spread the word**. Evangelize MUI's products by [linking to mui.com](https://mui.com/) on your website—every backlink matters.
Follow us on [X](https://twitter.com/MUI_hq), like and retweet the important news. Or just talk about us with your friends.
-- **Give us feedback**. Tell us what we're doing well or where we can improve. Please upvote (👍) the issues that you are the most interested in seeing solved.
+- **Give us feedback**. Tell us what is going well or where there is improvement opportunities. Please upvote (👍) the issues that you are the most interested in seeing solved.
- **Help new users**. You can answer questions on
[Stack Overflow](https://stackoverflow.com/questions/tagged/material-ui).
- **Make changes happen**.
@@ -59,7 +59,7 @@ import { createTheme } from '@mui/material';
const theme = createTheme({
transitions: {
- // So we have `transition: none;` everywhere
+ // So `transition: none;` gets applied everywhere
create: () => 'none',
},
});
@@ -106,8 +106,7 @@ But if you are using the default styled engine (`@mui/styled-engine`) the Emotio
Perhaps, however, you're adding some Material UI 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
-[Style library interoperability](/material-ui/integrations/interoperability/) section,
-where we show how simple it is to restyle Material UI components with alternative style libraries.
+[Style library interoperability](/material-ui/integrations/interoperability/) section to learn how to restyle Material UI components with alternative style libraries.
## When should I use inline-style vs. CSS?
@@ -121,7 +120,7 @@ The CSS alternative provides more advantages, such as:
## How do I use react-router?
-We detail the [integration with third-party routing libraries](/material-ui/integrations/routing/) like react-router or Next.js in our guide.
+Visit the guide about [integration with third-party routing libraries](/material-ui/integrations/routing/), like react-router or Next.js, for more details.
## How can I access the DOM element?
@@ -204,7 +203,7 @@ In the example above, the `Portal` would run an effect once, but might not re-re
This is especially apparent for React.lazy components in Suspense.
The above implementation could also not account for a change in the DOM node.
-This is why we require a prop with the actual DOM node so that React can take care of determining when the `Portal` should re-render:
+This is why a prop is required to the actual DOM node so that React can take care of determining when the `Portal` should re-render:
```jsx
function App() {
@@ -276,8 +275,8 @@ This may cause theme propagation issues, broken class names, specificity issues,
There are several common reasons for this to happen:
- You have another `@mui/styles` library somewhere in your dependencies.
-- You have a monorepo structure for your project (e.g, lerna, yarn workspaces) and `@mui/styles` module is a dependency in more than one package (this one is more or less the same as the previous one).
-- You have several applications that are using `@mui/styles` running on the same page (e.g., several entry points in Webpack are loaded on the same page).
+- You have a monorepo structure for your project (for example, lerna or yarn workspaces) and `@mui/styles` module is a dependency in more than one package (this one is more or less the same as the previous one).
+- You have several applications that are using `@mui/styles` running on the same page (for example, several entry points in Webpack are loaded on the same page).
### Duplicated module in node_modules
From 4d4283ac532fe34cbe7d9400b80898fb983ff19c Mon Sep 17 00:00:00 2001
From: alexandre
Date: Tue, 30 Jan 2024 14:16:14 +0100
Subject: [PATCH 21/25] continue on error
---
.github/workflows/vale-action.yml | 1 +
1 file changed, 1 insertion(+)
diff --git a/.github/workflows/vale-action.yml b/.github/workflows/vale-action.yml
index 61078d7162eeff..4b38d97dd549c3 100644
--- a/.github/workflows/vale-action.yml
+++ b/.github/workflows/vale-action.yml
@@ -14,6 +14,7 @@ jobs:
steps:
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
- uses: errata-ai/vale-action@c4213d4de3d5f718b8497bd86161531c78992084 # v2.0.1
+ continue-on-error: true
with:
reporter: github-pr-review
files: docs/data
From 09ad4a3b7aef1f0cc532f40d18233a5f42d027c7 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari
Date: Tue, 6 Feb 2024 00:25:29 +0100
Subject: [PATCH 22/25] remove duplicated redirection rule
---
docs/public/_redirects | 1 -
1 file changed, 1 deletion(-)
diff --git a/docs/public/_redirects b/docs/public/_redirects
index 936d4a85d7921d..9eacb701a8d06e 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -498,7 +498,6 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301!
/material-ui/guides/next-js-app-router/ /material-ui/guides/nextjs/ 301
/material-ui/guides/understand-mui-packages/ /blog/mui-product-comparison/ 301
# 2024
-/material-ui/guides/creating-themed-components/ /material-ui/integrations/nextjs/ 301
/material-ui/guides/nextjs/ /material-ui/integrations/nextjs/ 301
/material-ui/guides/interoperability/ /material-ui/integrations/interoperability/ 301
/material-ui/guides/theme-scoping/ /material-ui/integrations/theme-scoping/ 301
From 722568aec51f23f422386fbb5af41a8bdcbce412 Mon Sep 17 00:00:00 2001
From: Olivier Tassinari
Date: Tue, 6 Feb 2024 00:26:04 +0100
Subject: [PATCH 23/25] fix double redirection
---
docs/public/_redirects | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/public/_redirects b/docs/public/_redirects
index 9eacb701a8d06e..d52c1a3df5faa1 100644
--- a/docs/public/_redirects
+++ b/docs/public/_redirects
@@ -494,7 +494,7 @@ https://v4.material-ui.com/* https://v4.mui.com/:splat 301!
/material-ui/api/tree-view/ /x/api/tree-view/tree-view/ 301
/material-ui/api/tree-item/ /x/api/tree-view/tree-item/ 301
/material-ui/guides/styled-engine/ /material-ui/integrations/styled-components/ 301
-/material-ui/guides/themeable-component/ /material-ui/guides/creating-themed-components/ 301
+/material-ui/guides/themeable-component/ /material-ui/customization/creating-themed-components/ 301
/material-ui/guides/next-js-app-router/ /material-ui/guides/nextjs/ 301
/material-ui/guides/understand-mui-packages/ /blog/mui-product-comparison/ 301
# 2024
From d26349f30b740b7a456f93156e0e27cbc37afa3d Mon Sep 17 00:00:00 2001
From: Olivier Tassinari
Date: Tue, 6 Feb 2024 01:15:14 +0100
Subject: [PATCH 24/25] this feels easier to read and CI should catch them
---
.../material/customization/theming/theming.md | 10 +--
docs/data/material/getting-started/faq/faq.md | 30 ++++----
.../interoperability/interoperability.md | 74 +++++++++----------
.../productTemplate/TemplateHero.tsx | 2 +-
.../onepirate/modules/views/terms.md | 2 +-
5 files changed, 59 insertions(+), 59 deletions(-)
diff --git a/docs/data/material/customization/theming/theming.md b/docs/data/material/customization/theming/theming.md
index e5079b3d4176ff..e545c049b02135 100644
--- a/docs/data/material/customization/theming/theming.md
+++ b/docs/data/material/customization/theming/theming.md
@@ -1,6 +1,6 @@
# Theming
-Customize Material UI with your theme. You can change the colors, the typography and much more.
+Customize Material UI with your theme. You can change the colors, the typography and much more.
The theme specifies the color of the components, darkness of the surfaces, level of shadow, appropriate opacity of ink elements, etc.
@@ -11,14 +11,14 @@ To promote greater consistency between apps, light and dark theme types are avai
## Theme provider
If you wish to customize the theme, you need to use the `ThemeProvider` component in order to inject a theme into your application.
-However, this is optional; Material UI components come with a default theme.
+However, this is optional; Material UI components come with a default theme.
`ThemeProvider` relies on the [context feature of React](https://react.dev/learn/passing-data-deeply-with-context) to pass the theme down to the components, so you need to make sure that `ThemeProvider` is a parent of the components you are trying to customize.
You can learn more about this in [the API section](#themeprovider).
## Theme configuration variables
-Changing the theme configuration variables is the most effective way to match Material UI to your needs.
+Changing the theme configuration variables is the most effective way to match Material UI to your needs.
The following sections cover the most important theme variables:
- [`.palette`](/material-ui/customization/palette/)
@@ -33,7 +33,7 @@ You can check out the [default theme section](/material-ui/customization/default
### Custom variables
-When using Material UI's theme with [MUI System](/system/getting-started/) or [any other styling solution](/material-ui/integrations/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere.
+When using Material UI's theme with [MUI System](/system/getting-started/) or [any other styling solution](/material-ui/integrations/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere.
For instance:
```jsx
@@ -87,7 +87,7 @@ To add extra variables to the `theme.palette`, see [palette customization](/mate
The community has built great tools to build a theme:
-- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the Material UI component library. Includes basic site templates to show various components and how they are affected by the theme
+- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the Material UI component library. Includes basic site templates to show various components and how they are affected by the theme
- [Material palette generator](https://m2.material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input.
## Accessing the theme in a component
diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md
index 0c9270c0739b05..9a2ef51aa355f0 100644
--- a/docs/data/material/getting-started/faq/faq.md
+++ b/docs/data/material/getting-started/faq/faq.md
@@ -19,14 +19,14 @@ There are many ways to support us:
- Review and comment on existing [pull requests](https://github.com/mui/material-ui/pulls) and [issues](https://github.com/mui/material-ui/issues).
- [Improve our documentation](https://github.com/mui/material-ui/tree/HEAD/docs), fix bugs, or add features by [submitting a pull request](https://github.com/mui/material-ui/pulls).
- **Support us financially on [Open Collective](https://opencollective.com/mui-org)**.
- If you use Material UI in a commercial project and would like to support its continued development by becoming a Sponsor, or in a side or hobby project and would like to become a Backer, you can do so through Open Collective.
+ If you use Material UI in a commercial project and would like to support its continued development by becoming a Sponsor, or in a side or hobby project and would like to become a Backer, you can do so through Open Collective.
All funds donated are managed transparently, and Sponsors receive recognition in the README and on the homepage.
## Why do the fixed positioned elements move when a modal is opened?
Scrolling is blocked as soon as a modal is opened.
This prevents interacting with the background when the modal should be the only interactive content. However, removing the scrollbar can make your **fixed positioned elements** move.
-In this situation, you can apply a global `.mui-fixed` class name to tell Material UI to handle those elements.
+In this situation, you can apply a global `.mui-fixed` class name to tell Material UI to handle those elements.
## How can I disable the ripple effect globally?
@@ -51,7 +51,7 @@ const theme = createTheme({
## How can I disable transitions globally?
-Material UI uses the same theme helper for creating all its transitions.
+Material UI uses the same theme helper for creating all its transitions.
Therefore you can disable all transitions by overriding the helper in your theme:
```js
@@ -104,9 +104,9 @@ If you choose not to use it, you can still disable transitions and animations by
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.
-Perhaps, however, you're adding some Material UI components to an app that already uses another styling solution,
+Perhaps, however, you're adding some Material UI 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
-[Style library interoperability](/material-ui/integrations/interoperability/) section to learn how to restyle Material UI components with alternative style libraries.
+[Style library interoperability](/material-ui/integrations/interoperability/) section to learn how to restyle Material UI components with alternative style libraries.
## When should I use inline-style vs. CSS?
@@ -124,9 +124,9 @@ Visit the guide about [integration with third-party routing libraries](/material
## How can I access the DOM element?
-All Material UI components that should render something in the DOM forward their
+All Material UI components that should render something in the DOM forward their
ref to the underlying DOM component. This means that you can get DOM elements
-by reading the ref attached to Material UI components:
+by reading the ref attached to Material UI components:
```jsx
// or a ref setter function
@@ -137,7 +137,7 @@ const ref = React.createRef();
const element = ref.current;
```
-If you're not sure if the Material UI component in question forwards its ref you can check the API documentation under "Props."
+If you're not sure if the Material UI component in question forwards its ref you can check the API documentation under "Props."
You should find the message below, like in the [Button API](/material-ui/api/button/#props), [Button API](/material-ui/api/button/#props)
> The ref is forwarded to the root element.
@@ -153,13 +153,13 @@ Check out the [reference implementations](/material-ui/guides/server-rendering/#
## Why are the colors I am seeing different from what I see here?
The documentation site is using a custom theme. Hence, the color palette is
-different from the default theme that Material UI ships. Please refer to [this
+different from the default theme that Material UI ships. Please refer to [this
page](/material-ui/customization/theming/) to learn about theme customization.
## Why does component X require a DOM node in a prop instead of a ref object?
Components like the [Portal](/base-ui/react-portal/components-api/) or [Popper](/material-ui/api/popper/#props) require a DOM node in the `container` or `anchorEl` prop respectively.
-It seems convenient to simply pass a ref object in those props and let Material UI access the current value.
+It seems convenient to simply pass a ref object in those props and let Material UI access the current value.
This works in a simple scenario:
@@ -323,13 +323,13 @@ If you have several applications running on one page, consider using one @mui/st
## [legacy] Why aren't my components rendering correctly in production builds?
The #1 reason this happens is likely due to class name conflicts once your code is in a production bundle.
-For Material UI to work, the `className` values of all components on a page must be generated by a single instance of the [class name generator](/system/styles/advanced/#class-names).
+For Material UI to work, the `className` values of all components on a page must be generated by a single instance of the [class name generator](/system/styles/advanced/#class-names).
To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** among them.
You could end up accidentally using two class name generators in a variety of scenarios:
-- You accidentally **bundle** two versions of `@mui/styles`. You might have a dependency not correctly setting Material UI as a peer dependency.
+- You accidentally **bundle** two versions of `@mui/styles`. You might have a dependency not correctly setting Material UI as a peer dependency.
- You are using `StylesProvider` for a **subset** of your React tree.
- You are using a bundler and it is splitting code in a way that causes multiple class name generator instances to be created.
@@ -337,7 +337,7 @@ You could end up accidentally using two class name generators in a variety of sc
If you are using Webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk).
:::
-Overall, it's simple to recover from this problem by wrapping each Material UI application with [`StylesProvider`](/system/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared among them**.
+Overall, it's simple to recover from this problem by wrapping each Material UI application with [`StylesProvider`](/system/styles/api/#stylesprovider) components at the top of their component trees **and using a single class name generator shared among them**.
### [legacy] CSS works only on first load and goes missing
@@ -400,11 +400,11 @@ This generator needs to behave identically on the server and on the client. For
const html = ReactDOMServer.renderToString(
```
-- You need to verify that your client and server are running the **exactly the same version** of Material UI.
+- You need to verify that your client and server are running the **exactly the same version** of Material UI.
It is possible that a mismatch of even minor versions can cause styling problems.
To check version numbers, run `npm list @mui/styles` in the environment where you build your application and also in your deployment environment.
- You can also ensure the same version in different environments by specifying a specific Material UI version in the dependencies of your package.json.
+ You can also ensure the same version in different environments by specifying a specific Material UI version in the dependencies of your package.json.
_example of fix (package.json):_
diff --git a/docs/data/material/integrations/interoperability/interoperability.md b/docs/data/material/integrations/interoperability/interoperability.md
index 21986f85b5a7a1..f5928e24657497 100644
--- a/docs/data/material/integrations/interoperability/interoperability.md
+++ b/docs/data/material/integrations/interoperability/interoperability.md
@@ -1,6 +1,6 @@
# Style library interoperability
-While you can use the Emotion-based styling solution provided by Material UI, you can also use the one you already know, from plain CSS to styled-components.
+While you can use the Emotion-based styling solution provided by Material UI, you can also use the one you already know, from plain CSS to styled-components.
This guide aims to document the most popular alternatives,
but you should find that the principles applied here can be adapted to other libraries.
@@ -53,7 +53,7 @@ export default function PlainCssSlider() {
### CSS injection order ⚠️
-**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
+**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
```jsx
import * as React from 'react';
@@ -62,13 +62,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
export default function GlobalCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
```
-**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from Material UI. 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 Material UI. 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';
@@ -83,7 +83,7 @@ const cache = createCache({
export default function PlainCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
@@ -95,7 +95,7 @@ export default function PlainCssPriority() {
If you attempt to style the Slider,
you will likely need to affect some of the Slider's child elements, for example the thumb.
-In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself.
@@ -176,7 +176,7 @@ export default function PlainCssSliderDeep2() {
## Global CSS
Explicitly providing the class names to the component is too much effort?
-[You can target the class names generated by Material UI](/system/styles/advanced/).
+[You can target the class names generated by Material UI](/system/styles/advanced/).
[](https://codesandbox.io/p/sandbox/global-classnames-dho8k)
@@ -206,7 +206,7 @@ export default function GlobalCssSlider() {
### CSS injection order ⚠️
-**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
+**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
```jsx
import * as React from 'react';
@@ -215,13 +215,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
export default function GlobalCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
```
-**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from Material UI. 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 Material UI. 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';
@@ -236,7 +236,7 @@ const cache = createCache({
export default function GlobalCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
@@ -248,7 +248,7 @@ export default function GlobalCssPriority() {
If you attempt to style the Slider,
you will likely need to affect some of the Slider's child elements, for example the thumb.
-In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
The following example overrides the slider's `thumb` style in addition to the custom styles on the slider itself.
@@ -289,7 +289,7 @@ export default function GlobalCssSliderDeep() {
### Change the default styled engine
-By default, Material UI components come with Emotion as their style engine.
+By default, Material UI 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-components guide](/material-ui/integrations/styled-components/) or starting with one of the example projects:
@@ -328,7 +328,7 @@ export default function StyledComponents() {
If you attempt to style the Slider,
you will likely need to affect some of the Slider's child elements, for example the thumb.
-In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself.
@@ -367,18 +367,18 @@ export default function StyledComponentsDeep2() {
### Theme
-By using the Material UI theme provider, the theme will be available in the theme context
+By using the Material UI theme provider, the theme will be available in the theme context
of the styled engine too (Emotion or styled-components, depending on your configuration).
:::warning
If you are already using a custom theme with styled-components or Emotion,
-it might not be compatible with Material UI's theme specification. If it's not
-compatible, you need to render Material UI's ThemeProvider first. This will
+it might not be compatible with Material UI's theme specification. If it's not
+compatible, you need to render Material UI's ThemeProvider first. This will
ensure the theme structures are isolated. This is ideal for the progressive adoption
-of Material UI's components in the codebase.
+of Material UI's components in the codebase.
:::
-You are encouraged to share the same theme object between Material UI and the rest of your project.
+You are encouraged to share the same theme object between Material UI and the rest of your project.
```jsx
const CustomizedSlider = styled(Slider)(
@@ -463,7 +463,7 @@ export default function CssModulesSlider() {
### CSS injection order ⚠️
-**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
+**Note:** Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over your custom styles. To remove the need for **!important**, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
```jsx
import * as React from 'react';
@@ -472,13 +472,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
export default function GlobalCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
```
-**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from Material UI. 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 Material UI. 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';
@@ -493,7 +493,7 @@ const cache = createCache({
export default function CssModulesPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
@@ -505,8 +505,8 @@ export default function CssModulesPriority() {
If you attempt to style the Slider,
you will likely need to affect some of the Slider's child elements, for example the thumb.
-In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
-It's important to keep in mind that CSS Modules adds an unique id to each class, and that id won't be present on the Material UI provided children class. To escape from that, CSS Modules provides a functionality, the `:global` selector.
+In Material UI, all child elements have an increased specificity of 2: `.parent .child {}`. When writing overrides, you need to do the same.
+It's important to keep in mind that CSS Modules adds an unique id to each class, and that id won't be present on the Material UI provided children class. To escape from that, CSS Modules provides a functionality, the `:global` selector.
The following examples override the slider's `thumb` style in addition to the custom styles on the slider itself.
@@ -593,7 +593,7 @@ export default function CssModulesSliderDeep2() {
### The `css` prop
-Emotion's `css()` method works seamlessly with Material UI.
+Emotion's `css()` method works seamlessly with Material UI.
{{"demo": "EmotionCSS.js", "defaultCodeOpen": true}}
@@ -612,11 +612,11 @@ It works exactly like styled components. You can [use the same guide](/material-
### Setup
-If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) example project.
+If you are used to Tailwind CSS and want to use it together with the Material UI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-tailwind-ts) example project.
If you use a different framework, or already have set up your project, follow these steps:
1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation.
-2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the Material UI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)).
+2. Remove [Tailwind CSS's preflight](https://tailwindcss.com/docs/preflight) style so it can use the Material UI's preflight instead ([CssBaseline](/material-ui/react-css-baseline/)).
**tailwind.config.js**
@@ -646,12 +646,12 @@ If you use a different framework, or already have set up your project, follow th
```
-Most of the CSS used by Material UI has as specificity of 1, hence this `important` property is unnecessary.
-However, in a few edge cases, Material UI uses nested CSS selectors that win over Tailwind CSS.
+Most of the CSS used by Material UI has as specificity of 1, hence this `important` property is unnecessary.
+However, in a few edge cases, Material UI uses nested CSS selectors that win over Tailwind CSS.
Use this step to help ensure that the [deeper elements](#deeper-elements-5) can always be customized using Tailwind's utility classes.
More details on this option can be found here https://tailwindcss.com/docs/configuration#selector-strategy
-4. Fix the CSS injection order. Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over Tailwind CSS. To reduce the need for the `important` property, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
+4. Fix the CSS injection order. Most CSS-in-JS solutions inject their styles at the bottom of the HTML ``, which gives Material UI precedence over Tailwind CSS. To reduce the need for the `important` property, you need to change the CSS injection order. Here's a demo of how it can be done in Material UI:
```jsx
import * as React from 'react';
@@ -660,13 +660,13 @@ import { StyledEngineProvider } from '@mui/material/styles';
export default function GlobalCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
```
-**Note:** If you are using Emotion and have a custom cache in your app, it will override the one coming from Material UI. 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 Material UI. 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';
@@ -681,7 +681,7 @@ const cache = createCache({
export default function PlainCssPriority() {
return (
- {/* Your component tree. Now you can override Material UI's styles. */}
+ {/* Your component tree. Now you can override Material UI's styles. */}
);
}
@@ -731,7 +731,7 @@ root.render(
### Usage
-Now it's all set up and you can start using Tailwind CSS on the Material UI components!
+Now it's all set up and you can start using Tailwind CSS on the Material UI components!
{{"demo": "StyledComponents.js", "hideToolbar": true}}
@@ -799,10 +799,10 @@ export default function SliderThumbOverrides() {
## ~~JSS~~ TSS
-[JSS](https://cssinjs.org/) itself is no longer supported in Material UI, however,
+[JSS](https://cssinjs.org/) itself is no longer supported in Material UI, however,
if you like the hook-based API (`makeStyles` → `useStyles`) that [`react-jss`](https://codesandbox.io/p/sandbox/j3l06yyqpw) was offering you can opt for [`tss-react`](https://github.com/garronej/tss-react).
-[TSS](https://docs.tss-react.dev) integrates well with Material UI and provide a better
+[TSS](https://docs.tss-react.dev) integrates well with Material UI and provide a better
TypeScript support than JSS.
:::info
diff --git a/docs/src/components/productTemplate/TemplateHero.tsx b/docs/src/components/productTemplate/TemplateHero.tsx
index 19f097d6d47f3d..690bd8b1166844 100644
--- a/docs/src/components/productTemplate/TemplateHero.tsx
+++ b/docs/src/components/productTemplate/TemplateHero.tsx
@@ -35,7 +35,7 @@ export default function TemplateHero() {
Templates
- Fully built Material UI templates
+ Fully built Material UI templates
A collection of 4.5 average rating templates, selected and curated by MUI's team of
diff --git a/docs/src/pages/premium-themes/onepirate/modules/views/terms.md b/docs/src/pages/premium-themes/onepirate/modules/views/terms.md
index 75902cf4866108..f0dc9a5c3a2c5c 100644
--- a/docs/src/pages/premium-themes/onepirate/modules/views/terms.md
+++ b/docs/src/pages/premium-themes/onepirate/modules/views/terms.md
@@ -33,7 +33,7 @@ Subject to your continued compliance with these Terms, MUI grants you a limited,
## 5. Restrictions
-Except as expressly authorized by these Terms, you may not: (a) modify, disclose, alter, translate or create derivative works of the Site or the Services; (b) license, sublicense, resell, distribute, lease, rent, lend, transfer, assign or otherwise dispose of the Services or any Report (or any components thereof); (c) offer any part of the Services (including, without limitation, any Report) on a timeshare or service bureau basis; (c) allow or permit any third party to access or use the Services; (d) use the Site or the Services to store or transmit any viruses, software routines, or other code designed to permit anyone to access in an unauthorized manner, disable, erase or otherwise harm software, hardware, or data, or to perform any other harmful actions; (e) build a competitive product or service, or copy any features or functions of the Site or the Services (including, without limitation, the look-and-feel of the Site or the Services); (f) interfere with or disrupt the integrity or performance of the Site or the Services; (g) disclose to any third party any performance information or analysis relating to the Site or the Services; (h) remove, alter or obscure any proprietary notices in or on the Site or the Services, including copyright notices; (i) use the Site or the Services or any product thereof for any illegal or unauthorized purpose, or in a manner which violates any laws or regulations in your jurisdiction; (j) reverse engineer, decompile, disassemble, or otherwise attempt to discover the source code, object code, or underlying structure, ideas, or algorithms that make up the Services or any software, documentation, or data relating to the Services, except to the limited extent that applicable law prohibits such a restriction; or (k) cause or permit any third party to do any of the foregoing.
+Except as expressly authorized by these Terms, you may not: (a) modify, disclose, alter, translate or create derivative works of the Site or the Services; (b) license, sublicense, resell, distribute, lease, rent, lend, transfer, assign or otherwise dispose of the Services or any Report (or any components thereof); (c) offer any part of the Services (including, without limitation, any Report) on a timeshare or service bureau basis; (c) allow or permit any third party to access or use the Services; (d) use the Site or the Services to store or transmit any viruses, software routines, or other code designed to permit anyone to access in an unauthorized manner, disable, erase or otherwise harm software, hardware, or data, or to perform any other harmful actions; (e) build a competitive product or service, or copy any features or functions of the Site or the Services (including, without limitation, the look-and-feel of the Site or the Services); (f) interfere with or disrupt the integrity or performance of the Site or the Services; (g) disclose to any third party any performance information or analysis relating to the Site or the Services; (h) remove, alter or obscure any proprietary notices in or on the Site or the Services, including copyright notices; (i) use the Site or the Services or any product thereof for any illegal or unauthorized purpose, or in a manner which violates any laws or regulations in your jurisdiction; (j) reverse engineer, decompile, disassemble, or otherwise attempt to discover the source code, object code, or underlying structure, ideas, or algorithms that make up the Services or any software, documentation, or data relating to the Services, except to the limited extent that applicable law prohibits such a restriction; or (k) cause or permit any third party to do any of the foregoing.
## 6. Content
From 0bfc2b08494b94788cb7f735be1cf3b677d4aa6d Mon Sep 17 00:00:00 2001
From: Danilo Leal <67129314+danilo-leal@users.noreply.github.com>
Date: Tue, 6 Feb 2024 08:52:41 -0300
Subject: [PATCH 25/25] fix lint error
---
docs/src/components/productTemplate/TemplateHero.tsx | 2 +-
1 file changed, 1 insertion(+), 1 deletion(-)
diff --git a/docs/src/components/productTemplate/TemplateHero.tsx b/docs/src/components/productTemplate/TemplateHero.tsx
index 690bd8b1166844..19f097d6d47f3d 100644
--- a/docs/src/components/productTemplate/TemplateHero.tsx
+++ b/docs/src/components/productTemplate/TemplateHero.tsx
@@ -35,7 +35,7 @@ export default function TemplateHero() {
Templates
- Fully built Material UI templates
+ Fully built Material UI templates
A collection of 4.5 average rating templates, selected and curated by MUI's team of