You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/data/material/customization/dark-mode/dark-mode.md
+3-1
Original file line number
Diff line number
Diff line change
@@ -175,7 +175,9 @@ Use the `theme.applyStyles()` utility to apply styles for a specific mode.
175
175
176
176
We recommend using this function over checking `theme.palette.mode` to switch between styles as it has more benefits:
177
177
178
-
- It can be used with [Pigment CSS](https://github.com/mui/material-ui/tree/master/packages/pigment-css-react), our in-house zero-runtime CSS-in-JS solution.
178
+
<!-- #repo-reference -->
179
+
180
+
- It can be used with [Pigment CSS](https://github.com/mui/material-ui/tree/v6.x/packages/pigment-css-react), our in-house zero-runtime CSS-in-JS solution.
179
181
- It is generally more readable and maintainable.
180
182
- It is slightly more performant as it doesn't require to do style recalculation but the bundle size of SSR generated styles is larger.
If you need to manipulate colors, `@mui/material/styles` provides [a set of utilities](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/index.d.ts#L52-L67) to help with this.
152
+
<!-- #repo-reference -->
153
+
154
+
If you need to manipulate colors, `@mui/material/styles` provides [a set of utilities](https://github.com/mui/material-ui/blob/v6.x/packages/mui-material/src/styles/index.d.ts#L52-L67) to help with this.
153
155
The following example uses the `alpha()` and `getContrastRatio()` utilities to define tokens using opacity:
Copy file name to clipboardExpand all lines: docs/data/material/getting-started/example-projects/example-projects.md
+3-1
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,9 @@
4
4
5
5
## Official integrations
6
6
7
-
The following integration examples are available in the [`/examples`](https://github.com/mui/material-ui/tree/master/examples) folder of the Material UI GitHub repository.
7
+
<!-- #repo-reference -->
8
+
9
+
The following integration examples are available in the [`/examples`](https://github.com/mui/material-ui/tree/v6.x/examples) folder of the Material UI GitHub repository.
8
10
These examples feature Material UI paired with other popular React libraries and frameworks, so you can skip the initial setup steps and jump straight into building.
Copy file name to clipboardExpand all lines: docs/data/material/getting-started/supported-platforms/supported-platforms.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -15,7 +15,7 @@ You don't need to provide any JavaScript polyfill as it manages unsupported brow
15
15
16
16
<!-- #default-branch-switch -->
17
17
18
-
An extensive list can be found in our [.browserlistrc](https://github.com/mui/material-ui/blob/-/.browserslistrc#L12-L27) (check the `stable` entry).
18
+
An extensive list can be found in our [.browserlistrc](https://github.com/mui/material-ui/blob/v6.x/.browserslistrc#L12-L27) (check the `stable` entry).
19
19
20
20
Because Googlebot uses a web rendering service (WRS) to index the page content, it's critical that Material UI supports it.
21
21
[WRS regularly updates the rendering engine it uses](https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html).
Copy file name to clipboardExpand all lines: docs/data/material/getting-started/templates/blog/README.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@
4
4
5
5
<!-- #default-branch-switch -->
6
6
7
-
1. Copy these folders (`blog` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
7
+
1. Copy these folders (`blog` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/v6.x/examples).
8
8
2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, markdown-to-jsx.
Copy file name to clipboardExpand all lines: docs/data/material/getting-started/templates/checkout/README.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@
4
4
5
5
<!-- #default-branch-switch -->
6
6
7
-
1. Copy these folders (`checkout` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
7
+
1. Copy these folders (`checkout` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/v6.x/examples).
8
8
2. Make sure your project has the required dependencies: @mui/material, @emotion/styled, @emotion/react.
Copy file name to clipboardExpand all lines: docs/data/material/getting-started/templates/dashboard/README.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@
4
4
5
5
<!-- #default-branch-switch -->
6
6
7
-
1. Copy these folders (`dashboard` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
7
+
1. Copy these folders (`dashboard` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/v6.x/examples).
8
8
2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react, @mui/x-charts, @mui/x-date-pickers, @mui/x-data-grid, @mui/x-tree-view, dayjs
Copy file name to clipboardExpand all lines: docs/data/material/getting-started/templates/marketing-page/README.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@
4
4
5
5
<!-- #default-branch-switch -->
6
6
7
-
1. Copy these folders (`marketing-page` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
7
+
1. Copy these folders (`marketing-page` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/v6.x/examples).
8
8
2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
Copy file name to clipboardExpand all lines: docs/data/material/getting-started/templates/sign-in-side/README.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@
4
4
5
5
<!-- #default-branch-switch -->
6
6
7
-
1. Copy these folders (`sign-in-side` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
7
+
1. Copy these folders (`sign-in-side` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/v6.x/examples).
8
8
2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
Copy file name to clipboardExpand all lines: docs/data/material/getting-started/templates/sign-in/README.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@
4
4
5
5
<!-- #default-branch-switch -->
6
6
7
-
1. Copy these folders (`sign-in` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
7
+
1. Copy these folders (`sign-in` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/v6.x/examples).
8
8
2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
Copy file name to clipboardExpand all lines: docs/data/material/getting-started/templates/sign-up/README.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -4,7 +4,7 @@
4
4
5
5
<!-- #default-branch-switch -->
6
6
7
-
1. Copy these folders (`sign-up` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/master/examples).
7
+
1. Copy these folders (`sign-up` and `shared-theme`) into your project, or one of the [example projects](https://github.com/mui/material-ui/tree/v6.x/examples).
8
8
2. Make sure your project has the required dependencies: @mui/material, @mui/icons-material, @emotion/styled, @emotion/react.
Copy file name to clipboardExpand all lines: docs/data/material/guides/localization/localization.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -98,7 +98,7 @@ The [Data Grid and Data Grid Pro](/x/react-data-grid/) components have their own
98
98
99
99
<!-- #default-branch-switch -->
100
100
101
-
You can [find the source](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/locale/index.ts) in the GitHub repository.
101
+
You can [find the source](https://github.com/mui/material-ui/blob/v6.x/packages/mui-material/src/locale/index.ts) in the GitHub repository.
102
102
103
103
To create your own translation, or to customize the English text, copy this file to your project, make any changes needed and import the locale from there.
Copy file name to clipboardExpand all lines: docs/data/material/guides/typescript/typescript.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -6,7 +6,7 @@
6
6
7
7
<!-- #default-branch-switch -->
8
8
9
-
Material UI requires a minimum version of TypeScript 4.7. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-ts) example.
9
+
Material UI requires a minimum version of TypeScript 4.7. Have a look at the [Create React App with TypeScript](https://github.com/mui/material-ui/tree/v6.x/examples/material-ui-cra-ts) example.
10
10
11
11
For types to work, it's recommended that you have at least the following options enabled in your `tsconfig.json`:
Copy file name to clipboardExpand all lines: docs/data/material/integrations/interoperability/interoperability.md
+5-3
Original file line number
Diff line number
Diff line change
@@ -274,8 +274,8 @@ If, however, you would like to use styled-components, you can configure your app
274
274
275
275
<!-- #default-branch-switch -->
276
276
277
-
-[Create React App with styled-components](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components)
278
-
-[Create React App with styled-components and TypeScript](https://github.com/mui/material-ui/tree/master/examples/material-ui-cra-styled-components-ts)
277
+
-[Create React App with styled-components](https://github.com/mui/material-ui/tree/v6.x/examples/material-ui-cra-styled-components)
278
+
-[Create React App with styled-components and TypeScript](https://github.com/mui/material-ui/tree/v6.x/examples/material-ui-cra-styled-components-ts)
279
279
280
280
Following this approach reduces the bundle size, and removes the need to configure the CSS injection order.
281
281
@@ -580,7 +580,9 @@ It works exactly like styled components. You can [use the same guide](/material-
580
580
581
581
### Setup
582
582
583
-
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.
583
+
<!-- #repo-reference -->
584
+
585
+
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/v6.x/examples/material-ui-cra-tailwind-ts) example project.
584
586
If you use a different framework, or already have set up your project, follow these steps:
585
587
586
588
1. Add Tailwind CSS to your project, following the instructions in https://tailwindcss.com/docs/installation.
Copy file name to clipboardExpand all lines: docs/data/system/experimental-api/css-theme-variables/css-theme-variables.md
+3-1
Original file line number
Diff line number
Diff line change
@@ -189,7 +189,9 @@ Now, the Button's `backgroundColor`, `borderColor` and text `color` values will
189
189
For framework- or language-specific setup instructions, see [CSS theme variables—Usage—Server-side rendering](/material-ui/customization/css-theme-variables/usage/).
190
190
For framework or language specific setup, see [this](/material-ui/customization/css-theme-variables/usage/)
191
191
192
-
See the complete usage of `createCssVarsProvider` in [Material UI](https://github.com/mui/material-ui/blob/master/packages/mui-material/src/styles/ThemeProviderWithVars.tsx) and [Joy UI](https://github.com/mui/material-ui/blob/master/packages/mui-joy/src/styles/CssVarsProvider.tsx).
192
+
<!-- #repo-reference -->
193
+
194
+
See the complete usage of `createCssVarsProvider` in [Material UI](https://github.com/mui/material-ui/blob/v6.x/packages/mui-material/src/styles/ThemeProviderWithVars.tsx) and [Joy UI](https://github.com/mui/material-ui/blob/v6.x/packages/mui-joy/src/styles/CssVarsProvider.tsx).
Copy file name to clipboardExpand all lines: docs/data/system/getting-started/usage/usage.md
+1-1
Original file line number
Diff line number
Diff line change
@@ -158,7 +158,7 @@ Runtime performance takes a hit.
158
158
159
159
<!-- #default-branch-switch -->
160
160
161
-
Visit the [benchmark folder](https://github.com/mui/material-ui/tree/master/benchmark/browser) for a reproduction of the metrics above.
161
+
Visit the [benchmark folder](https://github.com/mui/material-ui/tree/v6.x/benchmark/browser) for a reproduction of the metrics above.
162
162
163
163
We believe that for most use cases it's fast enough, but there are simple workarounds when performance becomes critical.
164
164
For instance, when rendering a list with many items, you can use a CSS child selector to have a single "style injection" point (using d. for the wrapper and a. for each item).
0 commit comments