diff --git a/docs/.link-check-errors.txt b/docs/.link-check-errors.txt index f6e9b299140f19..4f82b8fd7ece91 100644 --- a/docs/.link-check-errors.txt +++ b/docs/.link-check-errors.txt @@ -1,6 +1,4 @@ Broken links found by `yarn docs:link-check` that exist: -- https://mui.com/base/react-portal/components-api/#portal - https://mui.com/blog/material-ui-v4-is-out/#premium-themes-store-✨ -- https://mui.com/material-ui/guides/minimizing-bundle-size/#legacy-bundle - https://mui.com/size-snapshot diff --git a/docs/data/joy/components/aspect-ratio/aspect-ratio.md b/docs/data/joy/components/aspect-ratio/aspect-ratio.md index 1d7680749b5867..57ab5ada832430 100644 --- a/docs/data/joy/components/aspect-ratio/aspect-ratio.md +++ b/docs/data/joy/components/aspect-ratio/aspect-ratio.md @@ -14,7 +14,7 @@ Aspect Ratio is a wrapper component for quickly resizing content to conform to y Media content like images can be stretched, resized, and cropped based on the CSS `object-fit` property. :::info -A [native CSS `aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) does exist, but MUI does not plan to implement it until browser compatibility increases to at least 94%. +A [native CSS `aspect-ratio` property](https://developer.mozilla.org/en-US/docs/Web/CSS/aspect-ratio) does exist, but MUI does not plan to implement it in Joy UI until browser compatibility increases to at least 94%. As of Q4 2022, compatibility is at 90%. Source: [Can I use…](https://caniuse.com/?search=aspect-ratio) ::: diff --git a/docs/data/joy/components/css-baseline/css-baseline.md b/docs/data/joy/components/css-baseline/css-baseline.md index 9d6f97904d37d5..947d37b24fb65b 100644 --- a/docs/data/joy/components/css-baseline/css-baseline.md +++ b/docs/data/joy/components/css-baseline/css-baseline.md @@ -33,7 +33,7 @@ export default function MyApp() { ## Scoping on children -However, you might be progressively migrating a website to MUI, using a global reset might not be an option. +However, you might be progressively migrating a website to Joy UI, using a global reset might not be an option. It's possible to apply the baseline only to the children by using the `ScopedCssBaseline` component. ```jsx diff --git a/docs/data/material/components/box/box.md b/docs/data/material/components/box/box.md index 600909bcd55abb..3f4a7fe06b8d4d 100644 --- a/docs/data/material/components/box/box.md +++ b/docs/data/material/components/box/box.md @@ -24,7 +24,7 @@ In addition, the `sx` prop allows you to specify any other CSS rules you may nee {{"demo": "BoxSx.js", "defaultCodeOpen": true }} -## Overriding MUI components +## Overriding Material UI components The Box component wraps your component. It creates a new DOM element, a `
` that by default can be changed with the `component` prop. @@ -38,7 +38,7 @@ For instance, you can change the margin this way. However, sometimes you have to target the underlying DOM element. As an example, you may want to change the border of the Button. The Button component defines its own styles. CSS inheritance doesn't help. -To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx-prop/) prop directly on the child if it is a MUI component. +To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx-prop/) prop directly on the child if it is a Material UI component. ```diff - @@ -47,7 +47,7 @@ To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx + ``` -For non-MUI components, use the `component` prop. +For non-Material UI components, use the `component` prop. ```diff - diff --git a/docs/data/material/components/css-baseline/css-baseline.md b/docs/data/material/components/css-baseline/css-baseline.md index d0c0033f997444..b4583ada27f05d 100644 --- a/docs/data/material/components/css-baseline/css-baseline.md +++ b/docs/data/material/components/css-baseline/css-baseline.md @@ -30,7 +30,7 @@ export default function MyApp() { ## Scoping on children -However, you might be progressively migrating a website to MUI, using a global reset might not be an option. +However, you might be progressively migrating a website to Material UI, using a global reset might not be an option. It's possible to apply the baseline only to the children by using the `ScopedCssBaseline` component. ```jsx diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md index bb8357c4329d33..7aabade29d51ab 100644 --- a/docs/data/material/components/icons/icons.md +++ b/docs/data/material/components/icons/icons.md @@ -8,9 +8,9 @@ materialDesign: https://m2.material.io/design/iconography/system-icons.html # Icons -

Guidance and suggestions for using icons with MUI.

+

Guidance and suggestions for using icons with Material UI.

-MUI provides icons support in three ways: +Material UI provides icon support in three ways: 1. Standardized [Material Icons](#material-svg-icons) exported as React components (SVG icons). 1. With the [SvgIcon](#svgicon) component, a React wrapper for custom SVG icons. @@ -36,7 +36,7 @@ Or **yarn**: yarn add @mui/icons-material ``` -These components use the MUI `SvgIcon` component to render the SVG path for each icon, and so have a peer-dependency on `@mui/material`. +These components use the Material UI `SvgIcon` component to render the SVG path for each icon, and so have a peer-dependency on `@mui/material`. If you aren't already using Material UI in your project, you can add it following the [installation guide](/material-ui/getting-started/installation/). @@ -94,7 +94,7 @@ If you need a custom SVG icon (not available in the [Material Icons](/material-u This component extends the native `` element: - It comes with built-in accessibility. -- SVG elements should be scaled for a 24x24px viewport so that the resulting icon can be used as is, or included as a child for other MUI components that use icons. +- SVG elements should be scaled for a 24x24px viewport so that the resulting icon can be used as is, or included as a child for other Material UI components that use icons. This can be customized with the `viewBox` attribute. To inherit the `viewBox` value from the original image, the `inheritViewBox` prop can be used. - By default, the component inherits the current color. Optionally, you can apply one of the theme colors using the `color` prop. diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md index dedd1f30feada4..308568eef4c876 100644 --- a/docs/data/material/components/text-fields/text-fields.md +++ b/docs/data/material/components/text-fields/text-fields.md @@ -306,9 +306,9 @@ In order for the text field to be accessible, **the input should be linked to th For more advanced use cases, you might be able to take advantage of: - [react-hook-form](https://react-hook-form.com/): React hook for form validation. -- [react-hook-form-mui](https://github.com/dohomi/react-hook-form-mui): MUI and react-hook-form combined. -- [formik-material-ui](https://github.com/stackworx/formik-mui): Bindings for using MUI with [formik](https://formik.org/). -- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui): Bindings for using MUI with [Redux Form](https://redux-form.com/). -- [mui-rff](https://github.com/lookfirst/mui-rff): Bindings for using MUI with [React Final Form](https://final-form.org/react). +- [react-hook-form-mui](https://github.com/dohomi/react-hook-form-mui): Material UI and react-hook-form combined. +- [formik-material-ui](https://github.com/stackworx/formik-mui): Bindings for using Material UI with [formik](https://formik.org/). +- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui): Bindings for using Material UI with [Redux Form](https://redux-form.com/). +- [mui-rff](https://github.com/lookfirst/mui-rff): Bindings for using Material UI with [React Final Form](https://final-form.org/react). - [@ui-schema/ds-material](https://www.npmjs.com/package/@ui-schema/ds-material) Bindings for using Material UI with [UI Schema](https://github.com/ui-schema/ui-schema). JSON Schema compatible. - [@data-driven-forms/mui-component-mapper](https://www.data-driven-forms.org/provided-mappers/mui-component-mapper): Bindings for using Material UI with [Data Driven Forms](https://github.com/data-driven-forms/react-forms). diff --git a/docs/data/material/components/tooltips/tooltips.md b/docs/data/material/components/tooltips/tooltips.md index cda713555bbf77..7467a4544c1d9a 100644 --- a/docs/data/material/components/tooltips/tooltips.md +++ b/docs/data/material/components/tooltips/tooltips.md @@ -129,7 +129,7 @@ In order to work with Safari, you need at least one display block or flex item b {{"demo": "DisabledTooltips.js"}} :::warning -If you're not wrapping a MUI component that inherits from `ButtonBase`, for instance, a native `

Transitions help to make a UI expressive and easy to use.

-MUI provides transitions that can be used to introduce some basic [motion](https://m2.material.io/design/motion/) to your applications. +Material UI provides transitions that can be used to introduce some basic [motion](https://m2.material.io/design/motion/) to your applications. {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} @@ -66,7 +66,7 @@ This example also demonstrates how to delay the enter transition. ## Child requirement -- **Forward the style**: To better support server rendering, MUI provides a `style` prop to the children of some transition components (Fade, Grow, Zoom, Slide). +- **Forward the style**: To better support server rendering, Material UI provides a `style` prop to the children of some transition components (Fade, Grow, Zoom, Slide). The `style` prop must be applied to the DOM for the animation to work as expected. - **Forward the ref**: The transition components require the first child element to forward its ref to the DOM node. For more details about ref, check out [Caveat with refs](/material-ui/guides/composition/#caveat-with-refs) - **Single element**: The transition components require only one child element (`React.Fragment` is not allowed). @@ -101,7 +101,7 @@ As components are added or removed, the `in` prop is toggled automatically by `T ## TransitionComponent prop -Some MUI components use these transitions internally. These accept a `TransitionComponent` prop to customize the default transition. +Some Material UI components use these transitions internally. These accept a `TransitionComponent` prop to customize the default transition. You can use any of the above components or your own. It should respect the following conditions: diff --git a/docs/data/material/components/typography/typography.md b/docs/data/material/components/typography/typography.md index 5fd028b6a14aa1..a3a90672c11ef2 100644 --- a/docs/data/material/components/typography/typography.md +++ b/docs/data/material/components/typography/typography.md @@ -17,7 +17,7 @@ A [typographic scale](https://m2.material.io/design/typography/#type-scale) has ## General -The _Roboto_ font will **not** be automatically loaded by MUI. +The _Roboto_ font will **not** be automatically loaded by Material UI. You are responsible for loading any fonts used in your application. Roboto Font has a few easy ways to get started. For more advanced configuration, check out [the theme customization section](/material-ui/customization/typography/). @@ -57,7 +57,7 @@ import '@fontsource/roboto/700.css'; For more info check out [Fontsource](https://github.com/fontsource/fontsource). Fontsource can be configured to load specific subsets, weights and styles. -MUI default typography configuration only relies on 300, 400, 500, and 700 font weights. +Material UI default typography configuration only relies on 300, 400, 500, and 700 font weights. ## Component diff --git a/docs/data/material/components/use-media-query/use-media-query.md b/docs/data/material/components/use-media-query/use-media-query.md index d90bdafb2557e4..b624e1edced218 100644 --- a/docs/data/material/components/use-media-query/use-media-query.md +++ b/docs/data/material/components/use-media-query/use-media-query.md @@ -26,9 +26,9 @@ The media query string can be any valid CSS media query, e.g. [`'(prefers-color- ⚠️ You can't use `'print'` per browsers limitation, e.g. [Firefox](https://bugzilla.mozilla.org/show_bug.cgi?id=774398). -## Using MUI's breakpoint helpers +## Using Material UI's breakpoint helpers -You can use MUI's [breakpoint helpers](/material-ui/customization/breakpoints/) as follows: +You can use Material UI's [breakpoint helpers](/material-ui/customization/breakpoints/) as follows: ```jsx import { useTheme } from '@mui/material/styles'; diff --git a/docs/data/material/customization/breakpoints/breakpoints.md b/docs/data/material/customization/breakpoints/breakpoints.md index 1f79ebf9e00741..69a829ff983ba9 100644 --- a/docs/data/material/customization/breakpoints/breakpoints.md +++ b/docs/data/material/customization/breakpoints/breakpoints.md @@ -3,7 +3,7 @@

API that enables the use of breakpoints in a wide variety of contexts.

For optimal user experience, Material Design interfaces need to be able to adapt their layout at various breakpoints. -MUI uses a **simplified** implementation of the original [specification](https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints). +Material UI uses a **simplified** implementation of the original [specification](https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints). The breakpoints are used internally in various components to make them responsive, but you can also take advantage of them diff --git a/docs/data/material/customization/color/color.md b/docs/data/material/customization/color/color.md index 02928b597e6892..4a56fcebc77af2 100644 --- a/docs/data/material/customization/color/color.md +++ b/docs/data/material/customization/color/color.md @@ -71,7 +71,7 @@ If you are using the default primary and / or secondary shades then by providing ### Tools by the community -- [mui-theme-creator](https://zenoo.github.io/mui-theme-creator/): A tool to help design and customize themes for the MUI 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. ## 2014 Material Design color palettes @@ -80,7 +80,7 @@ These color palettes, originally created by Material Design in 2014, are compris ### Important Terms -- **Palette**: A palette is a collection of colors, i.e. hues and their shades. MUI provides all colors from the Material Design guidelines. +- **Palette**: A palette is a collection of colors, i.e. hues and their shades. Material UI provides all colors from the Material Design guidelines. [This color palette](#color-palette) has been designed with colors that work harmoniously with each other. - **Hue & Shade**: A single color within the palette is made up of a hue such as "red", and shade, such as "500". "red 50" is the lightest shade of red (_pink!_), while "red 900" is the darkest. diff --git a/docs/data/material/customization/density/density.md b/docs/data/material/customization/density/density.md index a9415dfd5f0b46..bf7bf09d29ed7d 100644 --- a/docs/data/material/customization/density/density.md +++ b/docs/data/material/customization/density/density.md @@ -1,6 +1,6 @@ # Density -

How to apply density to MUI components.

+

How to apply density to Material UI components.

## Applying density @@ -35,7 +35,7 @@ The following components have props applying higher density: ## Explore theme density This tool allows you to apply density via spacing and component props. You can browse -around and see how this applies to the overall feel of MUI components. +around and see how this applies to the overall feel of Material UI components. If you enable high density a custom theme is applied to the docs. This theme is only for demonstration purposes. You _should not_ apply this theme to your whole application diff --git a/docs/data/material/customization/spacing/spacing.md b/docs/data/material/customization/spacing/spacing.md index c3d02670b3a836..f1e743c66545d4 100644 --- a/docs/data/material/customization/spacing/spacing.md +++ b/docs/data/material/customization/spacing/spacing.md @@ -2,7 +2,7 @@

Use the theme.spacing() helper to create consistent spacing between the elements of your UI.

-MUI uses [a recommended 8px scaling factor](https://m2.material.io/design/layout/understanding-layout.html) by default. +Material UI uses [a recommended 8px scaling factor](https://m2.material.io/design/layout/understanding-layout.html) by default. ```js const theme = createTheme(); diff --git a/docs/data/material/customization/theming/theming.md b/docs/data/material/customization/theming/theming.md index 2b18db5e642c6e..e8fe3b719b720f 100644 --- a/docs/data/material/customization/theming/theming.md +++ b/docs/data/material/customization/theming/theming.md @@ -1,6 +1,6 @@ # Theming -

Customize MUI 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; MUI 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 MUI 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 MUI's theme with [MUI System](/system/getting-started/overview/) or [any other styling solution](/material-ui/guides/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/overview/) or [any other styling solution](/material-ui/guides/interoperability/), it can be convenient to add additional variables to the theme so you can use them everywhere. For instance: ```jsx @@ -80,7 +80,7 @@ declare module '@mui/material/styles' { 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 MUI 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/customization/transitions/transitions.md b/docs/data/material/customization/transitions/transitions.md index f38f426b4fdb96..cef7b16a40a259 100644 --- a/docs/data/material/customization/transitions/transitions.md +++ b/docs/data/material/customization/transitions/transitions.md @@ -1,6 +1,6 @@ # Transitions -

The theme key enables you to customize the durations and easings of the various transitions used across MUI components, and offers a utility for creating custom transitions.

+

The theme key enables you to customize the durations and easings of the various transitions used across Material UI components, and offers a utility for creating custom transitions.

## API @@ -87,4 +87,4 @@ const theme = createTheme({ ## References -Check out the [Transitions](/material-ui/transitions/) page to explore the transition components that are included with MUI. +Check out the [Transitions](/material-ui/transitions/) page to explore the transition components that are included with Material UI. diff --git a/docs/data/material/customization/typography/typography.md b/docs/data/material/customization/typography/typography.md index 239a007684fa66..7fac41e1b419d0 100644 --- a/docs/data/material/customization/typography/typography.md +++ b/docs/data/material/customization/typography/typography.md @@ -84,13 +84,13 @@ Note that if you want to add additional `@font-face` declarations, you need to u ## Font size -MUI uses `rem` units for the font size. +Material UI uses `rem` units for the font size. The browser `` element default font size is `16px`, but browsers have an option to change this value, so `rem` units allow us to accommodate the user's settings, resulting in a better accessibility support. Users change font size settings for all kinds of reasons, from poor eyesight to choosing optimum settings for devices that can be vastly different in size and viewing distance. -To change the font-size of MUI you can provide a `fontSize` property. +To change the font-size of Material UI you can provide a `fontSize` property. The default value is `14px`. ```js @@ -163,13 +163,13 @@ Changing the font size can harm accessibility ♿️. Most browsers agree on the ::: The `theme.typography.htmlFontSize` property is provided for this use case, -which tells MUI what the font-size on the `` element is. +which tells Material UI what the font-size on the `` element is. This is used to adjust the `rem` value so the calculated font-size always match the specification. ```js const theme = createTheme({ typography: { - // Tell MUI what's the font-size on the html element is. + // Tell Material UI what the font-size on the html element is. htmlFontSize: 10, }, }); diff --git a/docs/data/material/customization/z-index/z-index.md b/docs/data/material/customization/z-index/z-index.md index ce2bf5b03a5a17..a93d8be6d9bd97 100644 --- a/docs/data/material/customization/z-index/z-index.md +++ b/docs/data/material/customization/z-index/z-index.md @@ -2,7 +2,7 @@

z-index is the CSS property that helps control layout by providing a third axis to arrange content.

-Several MUI components utilize `z-index`, employing a default z-index scale in MUI +Several Material UI components utilize `z-index`, employing a default z-index scale that has been designed to properly layer drawers, modals, snackbars, tooltips, and more. The `z-index` values start at an arbitrary number, high and specific enough to ideally avoid conflicts: diff --git a/docs/data/material/discover-more/backers/backers.md b/docs/data/material/discover-more/backers/backers.md index 4f101c5ffdd635..70ee6a2123125d 100644 --- a/docs/data/material/discover-more/backers/backers.md +++ b/docs/data/material/discover-more/backers/backers.md @@ -1,8 +1,8 @@ # Sponsors & Backers -

Support MUI core's development through crowdfunding.

+

Support the development of new open-source projects from MUI through crowdfunding.

-The core of MUI is a crowd-funded open-source project, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development. +The core of MUI is our crowd-funded open-source projects, licensed under the permissive MIT license. Sponsorship increases the rate of bug fixes, documentation improvements, and feature development. ## MUI's sponsors @@ -67,21 +67,21 @@ via [OpenCollective](https://opencollective.com/mui) ## FAQ -### Why is MUI a "crowd-funded open-source project"? +### Why is Material UI a "crowd-funded open-source project"? -The core of MUI is open-source to give users great freedom in how they use the software, and to enable the community to have influence over how the project progresses to make it appropriate for a wide range of use-cases. To make MUI a project that users can rely on for years to come, it needs to be well directed and financially sustainable. +Material UI (as well as Base UI and Joy UI) is open-source to give users great freedom in how they use the software, and to enable the community to have influence over how the project progresses to make it appropriate for a wide range of use-cases. To ensure that MUI's component libraries can stand the test of time for our users, they need to be well directed and financially sustainable. -The absolute best way to support MUI's ongoing development efforts is to become a sponsor. Crowd-sourced funding enables us to spend the most time directly working on improving MUI core, which you and other MUI users then benefit from. +The absolute best way to support MUI's ongoing development efforts is to become a sponsor. Crowd-sourced funding enables us to spend the most time directly working on improving MUI's products, which you and other MUI users then benefit from. ### How is sponsorship money spent? Sponsorship money is used to fund software development, testing, documentation, and releases of the MUI software suite. -### Is sponsorship required to use MUI? +### Is sponsorship required to use MUI's products? -Users are not legally required to give back to the MUI project, but it is in their interest to do so. +Users are not obligated to give back to MUI, but it is in their interest to do so. -By significantly reducing the amount of work needed to achieve business goals and reducing running costs, MUI results in huge time and money savings for users. We encourage organizations to contribute a portion of these savings back, enabling the project to advance more rapidly and result in even greater savings for your organization. +By significantly reducing the amount of work needed to achieve business goals and reducing running costs, MUI's libraries result in huge time and money savings for users. We encourage organizations to contribute a portion of these savings back, enabling the project to advance more rapidly and result in even greater savings for your organization. ### What's the difference between Patreon and OpenCollective? diff --git a/docs/data/material/discover-more/related-projects/related-projects.md b/docs/data/material/discover-more/related-projects/related-projects.md index c6c174adba8eb4..4703bd09b5fcfb 100644 --- a/docs/data/material/discover-more/related-projects/related-projects.md +++ b/docs/data/material/discover-more/related-projects/related-projects.md @@ -2,7 +2,7 @@

A carefully curated list of third-party tools that expand or build on top of Material UI's component library.

-Developers from the MUI community have built some excellent supplemental tools for working with Material UI—this page gathers the best that we've seen. +Developers from the community have built some excellent supplemental tools for working with Material UI—this page gathers the best that we've seen. Do you have a project that you think should be featured here? We'd love to see it. diff --git a/docs/data/material/discover-more/roadmap/roadmap.md b/docs/data/material/discover-more/roadmap/roadmap.md index b1c4c13973dc5f..40e3b61e2f25b6 100644 --- a/docs/data/material/discover-more/roadmap/roadmap.md +++ b/docs/data/material/discover-more/roadmap/roadmap.md @@ -4,7 +4,7 @@ ## Methodology -MUI is community driven – issues that resonate most with the community get the most attention. +MUI is community-driven—issues that resonate most with the community get the most attention. Please **upvote** (👍) on GitHub the issues you are most interested in. Thank you for participating [in the developer survey](/blog/2021-developer-survey-results/). diff --git a/docs/data/material/discover-more/vision/vision.md b/docs/data/material/discover-more/vision/vision.md index 298787949ffed3..b3da70e7a9e255 100644 --- a/docs/data/material/discover-more/vision/vision.md +++ b/docs/data/material/discover-more/vision/vision.md @@ -2,13 +2,13 @@

Our vision is to provide an elegant React implementation of the Material Design guidelines that can be customized to fully match your brand.

-The Material Design guidelines are an incredible starting point, but they do not provide guidance on all aspects or needs of an application. In addition to the guidelines-specific implementation, we want MUI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines. +The Material Design guidelines are an incredible starting point, but they do not provide guidance on all aspects or needs of an application. In addition to the guidelines-specific implementation, we want Material UI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines. -Therefore, MUI will be not only be an implementation of the Material Design guidelines, but a general use UI library of components that are needed by many. This generalized use doesn't imply any other design methodology. It also means we will have components or combinations that are simply not addressed in the design guidelines. +Therefore, Material UI will be not only be an implementation of the Material Design guidelines, but a general use UI library of components that are needed by many. This generalized use doesn't imply any other design methodology. It also means we will have components or combinations that are simply not addressed in the design guidelines. -We will focus on providing all the low-level tools needed to build a rich user-interface with React. Once we implement the Material Design guidelines (which is a bar set quite high), you should be able to take advantage of it for your own business with any style customization needed. We want to see companies succeeding using MUI in a way that matches their brand, close to the material philosophy or not. We don't want them to feel that their UI simply looks like another Google product. +We will focus on providing all the low-level tools needed to build a rich user-interface with React. Once we implement the Material Design guidelines (which is a bar set quite high), you should be able to take advantage of it for your own business with any style customization needed. We want to see companies succeeding using Material UI in a way that matches their brand, close to the material philosophy or not. We don't want them to feel that their UI simply looks like another Google product. -From a developer's point of view, we want MUI to: +From a developer's point of view, we want Material UI to: - Deliver on fully encapsulated / composable React components. - Be themeable / customizable. diff --git a/docs/data/material/getting-started/design-resources/design-resources.md b/docs/data/material/getting-started/design-resources/design-resources.md index 526aa0ac573bad..76502276b5d48b 100644 --- a/docs/data/material/getting-started/design-resources/design-resources.md +++ b/docs/data/material/getting-started/design-resources/design-resources.md @@ -6,7 +6,7 @@ adobe-xd sketch -## MUI resources +## Material UI resources ### Figma diff --git a/docs/data/material/getting-started/example-projects/example-projects.md b/docs/data/material/getting-started/example-projects/example-projects.md index 3cad359fcb93b1..4ef84c48e54c27 100644 --- a/docs/data/material/getting-started/example-projects/example-projects.md +++ b/docs/data/material/getting-started/example-projects/example-projects.md @@ -79,7 +79,7 @@ If you want to start with a more complete and real-world example, you could take - [ScaffoldHub](https://scaffoldhub.io/?partner=1): - Build your complete application with this online tool - - Choose your framework and library (React & MUI!) + - Choose your framework and library (React with Material UI) - Choose your database (SQL, MongoDB or Firestore) - Model your database and application with the intuitive GUI - Generate your application, including a complete scaffolded backend @@ -87,5 +87,5 @@ If you want to start with a more complete and real-world example, you could take - [Divjoy](https://divjoy.com?via=material-ui): - - Create your MUI app in minutes. + - Create your Material UI app in minutes. - You'll get a nice template, authentication, database integration, subscription payments, and more. diff --git a/docs/data/material/getting-started/faq/faq.md b/docs/data/material/getting-started/faq/faq.md index 5acc529300417f..6baf6bb437bb90 100644 --- a/docs/data/material/getting-started/faq/faq.md +++ b/docs/data/material/getting-started/faq/faq.md @@ -4,11 +4,11 @@ If you still can't find what you're looking for, you can refer to our [support page](/material-ui/getting-started/support/). -## MUI is awesome. How can I support the project? +## MUI is awesome. How can I support the company? There are many ways to support MUI: -- **Spread the word**. Evangelize MUI by [linking to mui.com](https://mui.com/) on your website, every backlink matters. +- **Spread the word**. Evangelize MUI's products by [linking to mui.com](https://mui.com/) on your website—every backlink matters. Follow us on [Twitter](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. - **Help new users**. You can answer questions on @@ -20,14 +20,14 @@ There are many ways to support MUI: - Help [translate](https://translate.mui.com) the documentation. - [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 [OpenCollective](https://opencollective.com/mui)**. - If you use MUI 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 OpenCollective. + 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 OpenCollective. All funds donated are managed transparently, and Sponsors receive recognition in the README and on the MUI home page. ## 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 MUI 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? @@ -52,7 +52,7 @@ const theme = createTheme({ ## How can I disable transitions globally? -MUI 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 @@ -105,10 +105,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 MUI 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/guides/interoperability/) section, -where we show how simple it is to restyle MUI 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? @@ -126,9 +126,9 @@ We detail the [integration with third-party routing libraries](/material-ui/guid ## How can I access the DOM element? -All MUI 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 MUI components: +by reading the ref attached to Material UI components: ```jsx // or a ref setter function @@ -139,7 +139,7 @@ const ref = React.createRef(); const element = ref.current; ``` -If you're not sure if the MUI component in question forwards its ref you +If you're not sure if the Material UI component in question forwards its ref you can check the API documentation under "Props" e.g. the [Button API](/material-ui/api/button/#props) includes @@ -249,13 +249,14 @@ 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 MUI 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/react-portal/components-api/#portal) 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 MUI access the current value. +Components like the [Portal](/base/api/portal/#props) 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. + This works in a simple scenario: ```jsx @@ -359,13 +360,13 @@ If you are getting the error: `TypeError: Cannot convert a Symbol value to a str ## [v4] 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 MUI 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. You might have a dependency not correctly setting MUI as a peer dependency. +- You accidentally **bundle** two versions of Material UI. 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. @@ -373,7 +374,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 MUI 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**. ### [v4] CSS works only on first load and goes missing @@ -438,11 +439,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 MUI. +- 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/material` 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 MUI 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/getting-started/support/support.md b/docs/data/material/getting-started/support/support.md index 9df3fc1773ad83..c32cd2e683d4a4 100644 --- a/docs/data/material/getting-started/support/support.md +++ b/docs/data/material/getting-started/support/support.md @@ -8,8 +8,8 @@ The community is your first stop for questions and advice about the framework. W ### Stack Overflow -For crowdsourced answers from expert MUI developers in our community. -Stack Overflow is also visited from time to time by the maintainers of MUI. +For crowdsourced answers from expert Material UI developers in our community. +Stack Overflow is also visited from time to time by the maintainers of Material UI. [Post a question](https://stackoverflow.com/questions/tagged/mui) @@ -43,9 +43,9 @@ Stay up to date with the development of the library by following the blog. ### Resources 📖 -New to MUI? It's easy to learn if you know where to start! +New to Material UI? It's easy to learn if you know where to start! -[Learn MUI](/material-ui/getting-started/learn/) +[Learn Material UI](/material-ui/getting-started/learn/) ### Twitter @@ -108,13 +108,13 @@ Request a demo ### Custom work 🛠 -Tweak MUI to meet specific requirements. Give us a summary of your needs and we'll help you if we can. We might: +Tweak MUI's component libraries to meet specific requirements. Give us a summary of your needs and we'll help you if we can. We might: - Give you an estimate of time and price if the work is straightforward -- Suggest alternatives that might not require MUI +- Suggest alternatives that might not require MUI components - Decline the work due to timing or relevancy -Note that work must be MUI related. +Note that work must be MUI-related. We don't accept general React development work. Our contracting price is $200/hour or $1,500/day. diff --git a/docs/data/material/getting-started/supported-platforms/supported-platforms.md b/docs/data/material/getting-started/supported-platforms/supported-platforms.md index a3d99f9f81d098..6559c6fa26cc73 100644 --- a/docs/data/material/getting-started/supported-platforms/supported-platforms.md +++ b/docs/data/material/getting-started/supported-platforms/supported-platforms.md @@ -1,10 +1,10 @@ # Supported platforms -

Learn about the platforms, from modern to old, that are supported by MUI.

+

Learn about the platforms, from modern to old, that are supported by Material UI.

## Browser -MUI supports the latest, stable releases of all major browsers and platforms. +Material UI supports the latest, stable releases of all major browsers and platforms. You don't need to provide any JavaScript polyfill as it manages unsupported browser features internally and in isolation. @@ -17,13 +17,13 @@ You don't need to provide any JavaScript polyfill as it manages unsupported brow An extensive list can be found in our [.browserlistrc](https://github.com/mui/material-ui/blob/-/.browserslistrc#L12-L27) (check the `stable` entry). -Because Googlebot uses a web rendering service (WRS) to index the page content, it's critical that MUI supports it. +Because Googlebot uses a web rendering service (WRS) to index the page content, it's critical that Material UI supports it. [WRS regularly updates the rendering engine it uses](https://webmasters.googleblog.com/2019/05/the-new-evergreen-googlebot.html). -You can expect MUI's components to render without major issues. +You can expect Material UI's components to render without major issues. ### IE 11 -MUI provides **partial** supports for IE 11. Be aware of the following: +Material UI provides **partial** supports for IE 11. Be aware of the following: - Some of the components have no support. For instance, the new components, the data grid, the date picker. - Some of the components have degraded support. For instance, the outlined input border radius is missing, the combobox doesn't remove diacritics, the circular progress animation is wobbling. @@ -39,7 +39,7 @@ v6 will completely remove the support of IE 11. -MUI supports [Node.js](https://github.com/nodejs/node) starting with version 12.0 for server-side rendering. +Material UI supports [Node.js](https://github.com/nodejs/node) starting with version 12.0 for server-side rendering. The objective is to support Node.js down to the [last version in maintenance mode](https://github.com/nodejs/Release#release-schedule). ### CSS prefixing @@ -57,10 +57,10 @@ It's a must-do for static pages, but it needs to be put in balance with not doin -MUI supports the most recent versions of React, starting with ^17.0.0 (the one with event delegation at the React root). +Material UI supports the most recent versions of React, starting with ^17.0.0 (the one with event delegation at the React root). Have a look at the older [versions](https://mui.com/versions/) for backward compatibility. ## TypeScript -MUI requires a minimum version of TypeScript 3.5. +Material UI requires a minimum version of TypeScript 3.5. This aims to match the policy of [DefinitelyTyped](https://github.com/DefinitelyTyped/DefinitelyTyped), with the support of the versions of TypeScript that are less than two years old. diff --git a/docs/data/material/guides/api/api.md b/docs/data/material/guides/api/api.md index cb7914e6f0d182..281dc33320b6de 100644 --- a/docs/data/material/guides/api/api.md +++ b/docs/data/material/guides/api/api.md @@ -1,6 +1,6 @@ # API design approach -

We have learned a great deal regarding how MUI is used, and the v1 rewrite allowed us to completely rethink the component API.

+

We have learned a great deal regarding how Material UI is used, and the v1 rewrite allowed us to completely rethink the component API.

:::info API design is hard because you can make it seem simple but it's actually deceptively complex, or make it actually simple but seem complex. @@ -147,7 +147,7 @@ For example, let's take a button that has different types. Each option has its p bounds the number of props exposed, and can easily support new values in the future. -The MUI components use a combination of the two approaches according to the following rules: +The Material UI components use a combination of the two approaches according to the following rules: - A _boolean_ is used when **2** possible values are required. - An _enum_ is used when **> 2** possible values are required, or if there is the possibility that additional possible values may be required in the future. diff --git a/docs/data/material/guides/composition/composition.md b/docs/data/material/guides/composition/composition.md index f92790907ada18..5ab0d24b7c482b 100644 --- a/docs/data/material/guides/composition/composition.md +++ b/docs/data/material/guides/composition/composition.md @@ -1,10 +1,10 @@ # Composition -

MUI tries to make composition as easy as possible.

+

Material UI tries to make composition as easy as possible.

## Wrapping components -To provide maximum flexibility and performance, MUI needs a way to know the nature of the child elements a component receives. +To provide maximum flexibility and performance, Material UI needs a way to know the nature of the child elements a component receives. To solve this problem, we tag some of the components with a `muiName` static property when needed. You may, however, need to wrap a component in order to enhance it, which can conflict with the `muiName` solution. @@ -24,11 +24,11 @@ WrappedIcon.muiName = Icon.muiName; ## Component prop -MUI allows you to change the root element that will be rendered via a prop called `component`. +Material UI allows you to change the root element that will be rendered via a prop called `component`. ### How does it work? -The custom component will be rendered by MUI like this: +The custom component will be rendered by Material UI like this: ```js return React.createElement(props.component, props); @@ -186,14 +186,14 @@ Some of the components need access to the DOM node. This was previously possible by using `ReactDOM.findDOMNode`. This function is deprecated in favor of `ref` and ref forwarding. However, only the following component types can be given a `ref`: -- Any MUI component +- Any Material UI component - class components i.e. `React.Component` or `React.PureComponent` - DOM (or host) components e.g. `div` or `button` - [React.forwardRef components](https://react.dev/reference/react/forwardRef) - [React.lazy components](https://react.dev/reference/react/lazy) - [React.memo components](https://react.dev/reference/react/memo) -If you don't use one of the above types when using your components in conjunction with MUI, you might see a warning from +If you don't use one of the above types when using your components in conjunction with Material UI, you might see a warning from React in your console similar to: :::warning @@ -225,7 +225,7 @@ Only the two most common use cases are covered. For more information see [this s ; ``` -To find out if the MUI component you're using has this requirement, check +To find out if the Material UI component you're using has this requirement, check out the props API documentation for that component. If you need to forward refs the description will link to this section. diff --git a/docs/data/material/guides/content-security-policy/content-security-policy.md b/docs/data/material/guides/content-security-policy/content-security-policy.md index 7f1bb84b116d8b..5ebb7d26f6f938 100644 --- a/docs/data/material/guides/content-security-policy/content-security-policy.md +++ b/docs/data/material/guides/content-security-policy/content-security-policy.md @@ -20,7 +20,7 @@ You can read more about CSP on the [MDN Web Docs](https://developer.mozilla.org/ ### Server-Side Rendering (SSR) -To use CSP with MUI (and emotion), you need to use a nonce. +To use CSP with Material UI (and Emotion), you need to use a nonce. A nonce is a randomly generated string that is only used once, therefore you need to add server middleware to generate one on each request. A CSP nonce is a Base 64 encoded string. You can generate one like this: diff --git a/docs/data/material/guides/interoperability/interoperability.md b/docs/data/material/guides/interoperability/interoperability.md index f4a82d7e526277..e76baff4152704 100644 --- a/docs/data/material/guides/interoperability/interoperability.md +++ b/docs/data/material/guides/interoperability/interoperability.md @@ -1,6 +1,6 @@ # Style library interoperability -

While you can use the Emotion-based styling solution provided by MUI to style your application, you can also use the one you already know and love (from plain CSS to styled-components).

+

While you can use the Emotion-based styling solution provided by Material UI to style your application, you can also use the one you already know and love (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 MUI 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 MUI: +**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 MUI'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 MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example: +**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from 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 MUI'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 MUI, 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 MUI](/system/styles/advanced/). +[You can target the class names generated by Material UI](/system/styles/advanced/). [![Edit Button](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/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 MUI 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 MUI: +**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 MUI'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 MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example: +**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from 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 MUI'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 MUI, 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 MUI, 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 MUI 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 MUI's theme specification. If it's not -compatible, you need to render MUI'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 MUI's components in the codebase. +of Material UI's components in the codebase. ::: -You are encouraged to share the same theme object between MUI 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 MUI 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 MUI: +**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 MUI'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 MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example: +**Note:** If you are using Emotion and have a custom cache in your app, that one will override the one coming from 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 MUI'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 MUI, 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 MUI 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 MUI. +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 MUI components, you can start by cloning the [Tailwind CSS](https://github.com/mui/material-ui/tree/master/examples/material-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-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 MUI'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** @@ -647,11 +647,11 @@ 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, MUI uses nested CSS selectors that win over Tailwind CSS. +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 MUI 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 MUI: +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 MUI'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 MUI. In order for the injection order to still be correct, you need to add the prepend option. Here is an example: +**Note:** If you are using Emotion and have a custom cache in your app, it will override the one coming from 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 MUI's styles. */} + {/* Your component tree. Now you can override Material UI's styles. */} ); } @@ -721,7 +721,7 @@ root.render( ### Usage -Now it's all set up and you can start using Tailwind CSS on the MUI components! +Now it's all set up and you can start using Tailwind CSS on the Material UI components! {{"demo": "StyledComponents.js", "hideToolbar": true}} @@ -789,10 +789,10 @@ export default function SliderThumbOverrides() { ## ~~JSS~~ TSS -[JSS](https://cssinjs.org/) itself is no longer supported in MUI 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/s/j3l06yyqpw) was offering you can opt for [`tss-react`](https://github.com/garronej/tss-react). -[TSS](https://docs.tss-react.dev) integrates well with MUI 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/data/material/guides/localization/localization.md b/docs/data/material/guides/localization/localization.md index c2bc202ab11e10..8e77ebb30a4d12 100644 --- a/docs/data/material/guides/localization/localization.md +++ b/docs/data/material/guides/localization/localization.md @@ -2,7 +2,7 @@

Localization (also referred to as "l10n") is the process of adapting a product or content to a specific locale or market.

-The default locale of MUI is English (United States). If you want to use other locales, follow the instructions below. +The default locale of Material UI is English (United States). If you want to use other locales, follow the instructions below. ## Locale text @@ -96,8 +96,8 @@ You can [find the source](https://github.com/mui/material-ui/blob/master/package 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. -Please do consider contributing new translations back to MUI by opening a pull request. -However, MUI aims to support the [100 most common](https://en.wikipedia.org/wiki/List_of_languages_by_number_of_native_speakers) [locales](https://www.ethnologue.com/guides/ethnologue200), we might not accept contributions for locales that are not frequently used, for instance `gl-ES` that has "only" 2.5 million native speakers. +Please do consider contributing new translations back to Material UI by opening a pull request. +However, Material UI aims to support the [100 most common](https://en.wikipedia.org/wiki/List_of_languages_by_number_of_native_speakers) [locales](https://www.ethnologue.com/guides/ethnologue200), we might not accept contributions for locales that are not frequently used, for instance `gl-ES` that has "only" 2.5 million native speakers. ## RTL Support diff --git a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md index d31ab7a13ebbf6..bdc3eda53d8b5e 100644 --- a/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md +++ b/docs/data/material/guides/minimizing-bundle-size/minimizing-bundle-size.md @@ -4,25 +4,23 @@ ## Bundle size matters -MUI takes the bundle size very seriously. Size snapshots are taken +Material UI's maintainers take bundle size very seriously. Size snapshots are taken on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot/)). Combined with [dangerJS](https://danger.systems/js/) we can inspect -[detailed bundle size changes](https://github.com/mui/material-ui/pull/14638#issuecomment-466658459) on every pull request. +[detailed bundle size changes](https://github.com/mui/material-ui/pull/14638#issuecomment-466658459) on every Pull Request. ## When and how to use tree-shaking? -Tree-shaking of MUI's open source projects, e.g. Material UI works out of the box in modern frameworks. -MUI exposes its full API on the top-level `@mui` imports. -If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically in **production**: +Tree-shaking Material UI works out of the box in modern frameworks. +Material UI exposes its full API on the top-level `@mui` imports. +If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and still get an optimized bundle size automatically: ```js import { Button, TextField } from '@mui/material'; ``` -:::warning -The following instructions are only needed if you need to optimize the load times in **development** (e.g. needed for icons) or if you are using an older bundler +⚠️ The following instructions are only needed if you want to optimize your development startup times or if you are using an older bundler that doesn't support tree-shaking. -::: ## Development environment @@ -187,10 +185,10 @@ Modify your `package.json` commands: ```diff "scripts": { - "start": "react-scripts start", -- "build": "react-scripts build", -- "test": "react-scripts test", + "start": "react-app-rewired start", +- "build": "react-scripts build", + "build": "react-app-rewired build", +- "test": "react-scripts test", + "test": "react-app-rewired test", "eject": "react-scripts eject" } @@ -212,19 +210,10 @@ It will perform the following diffs: ## Available bundles The package published on npm is **transpiled**, with [Babel](https://github.com/babel/babel), to take into account the [supported platforms](/material-ui/getting-started/supported-platforms/). -In addition, to the default bundle, you can opt-in: - -- **Modern bundle**. The modern bundle can be found under the [`/modern` folder](https://unpkg.com/@mui/material/modern/). - It targets the latest released versions of evergreen browsers (Chrome, Firefox, Safari, Edge). - This can be used to make separate bundles targeting different browsers. -- **Legacy bundle**. If you need to support IE 11 you cannot use the default or modern bundle without transpilation. - However, you can use the legacy bundle found under the [`/legacy` folder](https://unpkg.com/@mui/material/legacy/). - You don't need any additional polyfills. - -### How to use - -You can use these bundles at the bundler level with e.g [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias): +⚠️ Developers are **strongly discouraged** to import from any of the other bundles directly. +Otherwise it's not guaranteed that dependencies used also use legacy or modern bundles. +Instead, use these bundles at the bundler level with e.g [Webpack's `resolve.alias`](https://webpack.js.org/configuration/resolve/#resolvealias): ```js { @@ -241,7 +230,14 @@ You can use these bundles at the bundler level with e.g [Webpack's `resolve.alia } ``` -:::error -Developers are **strongly discouraged** to import from these bundles directly in the code because a third-party dependency might import a different bundle. -So unless you can guarantee that all your dependencies use the same bundle, don't do it. -::: +### Modern bundle + +The modern bundle can be found under the [`/modern` folder](https://unpkg.com/@mui/material/modern/). +It targets the latest released versions of evergreen browsers (Chrome, Firefox, Safari, Edge). +This can be used to make separate bundles targeting different browsers. + +### Legacy bundle + +If you need to support IE 11 you cannot use the default or modern bundle without transpilation. +However, you can use the legacy bundle found under the [`/legacy` folder](https://unpkg.com/@mui/material/legacy/). +You don't need any additional polyfills. diff --git a/docs/data/material/guides/pickers-migration/pickers-migration.md b/docs/data/material/guides/pickers-migration/pickers-migration.md index 0456a60b48791c..803e54853c6572 100644 --- a/docs/data/material/guides/pickers-migration/pickers-migration.md +++ b/docs/data/material/guides/pickers-migration/pickers-migration.md @@ -87,7 +87,7 @@ function App() { ## Render input -We introduced a new **required** `renderInput` prop. This simplifies using non-MUI text field input components. +We introduced a new **required** `renderInput` prop. This simplifies using non-Material UI text field input components. ```jsx } /> diff --git a/docs/data/material/guides/right-to-left/right-to-left.md b/docs/data/material/guides/right-to-left/right-to-left.md index 1beb91ae137e68..020e7631286b35 100644 --- a/docs/data/material/guides/right-to-left/right-to-left.md +++ b/docs/data/material/guides/right-to-left/right-to-left.md @@ -1,6 +1,6 @@ # Right-to-left -

Right-to-left languages such as Arabic, Persian, or Hebrew are supported. To change the direction of MUI components you must follow the following steps.

+

Right-to-left languages such as Arabic, Persian, or Hebrew are supported. To change the direction of Material UI components you must follow the following steps.

## Steps @@ -59,7 +59,7 @@ In case you are using `jss` (up to v4) or with the legacy `@mui/styles` package, npm install jss-rtl ``` -Having installed the plugin in your project, MUI components still require it to be loaded by the style engine instance that you use. Find bellow guides on how you can load it. +Having installed the plugin in your project, Material UI components still require it to be loaded by the style engine instance that you use. Find bellow guides on how you can load it. ### 4. Load the rtl plugin diff --git a/docs/data/material/guides/routing/routing.md b/docs/data/material/guides/routing/routing.md index 18e5451c52fcfc..14386149bf2d9c 100644 --- a/docs/data/material/guides/routing/routing.md +++ b/docs/data/material/guides/routing/routing.md @@ -20,7 +20,7 @@ For instance, with a `Button` component: In real-life applications, using a native `` element is rarely enough. You can improve the user experience by using an enhanced Link component systematically. -The theme of MUI allows configuring this component once. +The Material UI theme lets you configure this component once. For instance, with react-router: ```tsx @@ -32,7 +32,7 @@ const LinkBehavior = React.forwardRef< Omit & { href: RouterLinkProps['to'] } >((props, ref) => { const { href, ...other } = props; - // Map href (MUI) -> to (react-router) + // Map href (Material UI) -> to (react-router) return ; }); diff --git a/docs/data/material/guides/server-rendering/server-rendering.md b/docs/data/material/guides/server-rendering/server-rendering.md index 5ed55cbc999652..27eaa8cafde72f 100644 --- a/docs/data/material/guides/server-rendering/server-rendering.md +++ b/docs/data/material/guides/server-rendering/server-rendering.md @@ -5,9 +5,9 @@ When the server receives the request, it renders the required component(s) into an HTML string, and then sends it as a response to the client. From that point on, the client takes over rendering duties. -## MUI on the server +## Material UI on the server -MUI was designed from the ground-up with the constraint of rendering on the server, but it's up to you to make sure it's correctly integrated. +Material UI was designed from the ground-up with the constraint of rendering on the server, but it's up to you to make sure it's correctly integrated. It's important to provide the page with the required CSS, otherwise the page will render with just the HTML then wait for the CSS to be injected by the client, causing it to flicker (FOUC). To inject the style down to the client, we need to: @@ -88,7 +88,7 @@ inside a [`CacheProvider`](https://emotion.sh/docs/cache-provider) and [`ThemePr The key step in server-side rendering is to render the initial HTML of the component **before** we send it to the client-side. To do this, we use [ReactDOMServer.renderToString()](https://react.dev/reference/react-dom/server/renderToString). -MUI is using Emotion as its default styled engine. +Material UI uses Emotion as its default styled engine. We need to extract the styles from the Emotion instance. For this, we need to share the same cache configuration for both the client and server: diff --git a/docs/data/material/guides/shadow-dom/shadow-dom.md b/docs/data/material/guides/shadow-dom/shadow-dom.md index 49ad539adb78d3..3cdd1658cf88ac 100644 --- a/docs/data/material/guides/shadow-dom/shadow-dom.md +++ b/docs/data/material/guides/shadow-dom/shadow-dom.md @@ -34,7 +34,7 @@ ReactDOM.createRoot(shadowRootElement).render( ### 2. Theme -MUI components like `Menu`, `Dialog`, `Popover` and others use [`Portal`](/material-ui/react-portal/) to render a new "subtree" in a container outside of current DOM hierarchy. +Material UI components like `Menu`, `Dialog`, `Popover` and others use [`Portal`](/material-ui/react-portal/) to render a new "subtree" in a container outside of current DOM hierarchy. By default, this container is `document.body`. But since the styles are applied only inside of the Shadow DOM, we need to render portals inside the Shadow DOM container as well: diff --git a/docs/data/material/guides/styled-engine/styled-engine.md b/docs/data/material/guides/styled-engine/styled-engine.md index 828d5dde04fdf2..3eb503dfb7f222 100644 --- a/docs/data/material/guides/styled-engine/styled-engine.md +++ b/docs/data/material/guides/styled-engine/styled-engine.md @@ -2,9 +2,9 @@

Configuring your preferred styling library.

-The default style library used for generating CSS styles for MUI components is [emotion](https://github.com/emotion-js/emotion). -All of the MUI components rely on the `styled()` API to inject CSS into the page. -This API is supported by multiple popular styling libraries, which makes it possible to switch between them in MUI. +The default style library used for generating CSS styles for Material UI components is [Emotion](https://github.com/emotion-js/emotion). +All of the Material UI components rely on the `styled()` API to inject CSS into the page. +This API is supported by multiple popular styling libraries, which makes it possible to switch between them in Material UI. ## How to switch to styled-components diff --git a/docs/data/material/guides/testing/testing.md b/docs/data/material/guides/testing/testing.md index 9dfa791361a1c5..a1f96498dabfde 100644 --- a/docs/data/material/guides/testing/testing.md +++ b/docs/data/material/guides/testing/testing.md @@ -4,18 +4,18 @@ ## Userspace -It's generally recommended to test your application without tying the tests too closely to MUI. -This is how MUI components are tested internally. +It's generally recommended to test your application without tying the tests too closely to Material UI. +This is how Material UI components are tested internally. A library that has a first-class API for this approach is [`@testing-library/react`](https://testing-library.com/docs/react-testing-library/intro/). -For example, when rendering a `TextField` your test should not need to query for the specific MUI instance of the `TextField` but rather for the `input`, or `[role="textbox"]`. +For example, when rendering a `TextField` your test should not need to query for the specific Material UI instance of the `TextField` but rather for the `input`, or `[role="textbox"]`. -By not relying on the React component tree you make your test more robust against internal changes in MUI or, if you need snapshot testing, adding additional wrapper components such as context providers. +By not relying on the React component tree you make your test more robust against internal changes in Material UI or, if you need snapshot testing, adding additional wrapper components such as context providers. We don't recommend snapshot testing though. ["Effective snapshot testing" by Kent C. Dodds](https://kentcdodds.com/blog/effective-snapshot-testing) goes into more details why snapshot testing might be misleading for React component tests. ## Internal -MUI has **a wide range** of tests so we can +MUI has **a wide range** of tests for Material UI so we can iterate with confidence on the components, for instance, the visual regression tests provided by [Argos-CI](https://app.argos-ci.com/mui/material-ui/builds) have proven to be really helpful. To learn more about the internal tests, you can have a look at the [README](https://github.com/mui/material-ui/blob/HEAD/test/README.md). diff --git a/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md b/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md index c4b45d32d43537..5e68818d72500f 100644 --- a/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md +++ b/docs/data/material/guides/understand-mui-packages/understand-mui-packages.md @@ -1,6 +1,6 @@ # Understanding MUI packages -

An overview of the MUI packages and the relationships between them.

+

An overview of MUI's packages and the relationships between them.

## Overview 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 1b095b604aa2b4..d35f398c6eb0c4 100644 --- a/docs/data/material/migration/migration-v4/v5-style-changes.md +++ b/docs/data/material/migration/migration-v4/v5-style-changes.md @@ -177,7 +177,7 @@ export default function GlobalCssPriority() { return ( {/* Inject Emotion before JSS */} - {/* Your component tree. Now you can override MUI's styles. */} + {/* Your component tree. Now you can override Material UI's styles. */} ); } diff --git a/docs/data/styles/advanced/advanced.md b/docs/data/styles/advanced/advanced.md index 8afd6fa80cd79c..65db91794e0b1d 100644 --- a/docs/data/styles/advanced/advanced.md +++ b/docs/data/styles/advanced/advanced.md @@ -2,7 +2,7 @@

This section covers more advanced usage of @mui/styles.

-> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI. +> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for Material UI. > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. > If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative. @@ -12,7 +12,7 @@ Add a `ThemeProvider` to the top level of your app to pass a theme down the React component tree. Then, you can access the theme object in style functions. -> This example creates a theme object for custom-built components. If you intend to use some of the MUI's components you need to provide a richer theme structure using the `createTheme()` method. Head to the [theming section](/material-ui/customization/theming/) to learn how to build your custom MUI theme. +> This example creates a theme object for custom-built components. If you intend to use some of Material UI's components you need to provide a richer theme structure using the `createTheme()` method. Head to the [theming section](/material-ui/customization/theming/) to learn how to build your custom Material UI theme. ```jsx import { ThemeProvider } from '@mui/styles'; @@ -175,7 +175,7 @@ function Parent() { JSS uses plugins to extend its core, allowing you to cherry-pick the features you need, and only pay the performance overhead for what you are using. -Not all the plugins are available in MUI by default. The following (which is a subset of +Not all the plugins are available in Material UI by default. The following (which is a subset of [jss-preset-default](https://cssinjs.org/jss-preset-default/)) are included: - [jss-plugin-rule-value-function](https://cssinjs.org/jss-plugin-rule-value-function/) @@ -243,7 +243,7 @@ import { StylesProvider } from '@mui/styles'; {/* Your component tree. - Styled components can override MUI's styles. */} + Styled components can override Material UI's styles. */} ; ``` @@ -453,7 +453,7 @@ const className = `${productionPrefix}${identifier}`; However, when the following conditions are met, the class names are **deterministic**: - Only one theme provider is used (**No theme nesting**) -- The style sheet has a name that starts with `Mui` (all MUI components). +- The style sheet has a name that starts with `Mui` (all Material UI components). - The `disableGlobal` option of the [class name generator](/system/styles/api/#creategenerateclassname-options-class-name-generator) is `false` (the default). ## Global CSS diff --git a/docs/data/styles/api/api.md b/docs/data/styles/api/api.md index 9621458ddc121d..7f02a0efcd0069 100644 --- a/docs/data/styles/api/api.md +++ b/docs/data/styles/api/api.md @@ -6,7 +6,7 @@ title: Styles API

The API reference of @mui/styles.

-> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI. +> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for Material UI. > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. > If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative. @@ -234,7 +234,7 @@ It should preferably be used at **the root of your component tree**. | children \* | node | | Your component tree. | | disableGeneration | bool | false | You can disable the generation of the styles with this option. It can be useful when traversing the React tree outside of the HTML rendering step on the server. Let's say you are using react-apollo to extract all the queries made by the interface server-side. You can significantly speed up the traversal with this prop. | | generateClassName | func | | JSS's class name generator. | -| injectFirst | bool | false | By default, the styles are injected last in the `` element of the page. As a result, they gain more specificity than any other style sheet. If you want to override MUI's styles, set this prop. | +| injectFirst | bool | false | By default, the styles are injected last in the `` element of the page. As a result, they gain more specificity than any other style sheet. If you want to override Material UI's styles, set this prop. | | jss | object | | JSS's instance. | ### Examples diff --git a/docs/data/styles/basics/basics.md b/docs/data/styles/basics/basics.md index a1abc4e394664d..081bd359a2ae26 100644 --- a/docs/data/styles/basics/basics.md +++ b/docs/data/styles/basics/basics.md @@ -1,24 +1,24 @@ # @mui/styles (LEGACY) -

The legacy styling solution of MUI.

+

The legacy styling solution for Material UI.

-> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for MUI. +> ⚠️ `@mui/styles` is the _**legacy**_ styling solution for Material UI. > It depends on [JSS](https://cssinjs.org/) as a styling solution, which is not used in the `@mui/material` anymore, deprecated in v5. > If you don't want to have both Emotion & JSS in your bundle, please refer to the [`@mui/system`](/system/getting-started/overview/) documentation which is the recommended alternative. > ⚠️ `@mui/styles` is not compatible with [React.StrictMode](https://react.dev/reference/react/StrictMode) or React 18. -MUI aims to provide a strong foundation for building dynamic UIs. -For the sake of simplicity, **we expose the styling solution used in MUI components** as the `@mui/styles` package. -You can use it, but you don't have to, since MUI is also [interoperable with](/material-ui/guides/interoperability/) all the other major styling solutions. +Material UI aims to provide a strong foundation for building dynamic UIs. +For the sake of simplicity, **we expose the styling solution used in Material UI components** as the `@mui/styles` package. +You can use it, but you don't have to, since Material UI is also [interoperable with](/material-ui/guides/interoperability/) all the other major styling solutions. -## Why use MUI's styling solution? +## Why use Material UI's styling solution? -In previous versions, MUI has used [Less](https://lesscss.org/), and then a custom inline-style solution to write the component styles, but these approaches proved to be limited. +In previous versions, Material UI has used [Less](https://lesscss.org/), and then a custom inline-style solution to write the component styles, but these approaches proved to be limited. [A _CSS-in-JS_ solution](https://github.com/oliviertassinari/a-journey-toward-better-style) overcomes many of those limitations, and **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). -MUI's styling solution is inspired by many other styling libraries such as [styled-components](https://styled-components.com/) and [Emotion](https://emotion.sh/). +Material UI's styling solution is inspired by many other styling libraries such as [styled-components](https://styled-components.com/) and [Emotion](https://emotion.sh/). - 💅 You can expect [the same advantages](https://styled-components.com/docs/basics#motivation) as styled-components. @@ -27,7 +27,7 @@ MUI's styling solution is inspired by many other styling libraries such as [styl - 🚀 It's [blazing fast](https://github.com/mui/material-ui/tree/master/benchmark/server#material-uistyles). - 🧩 It's extensible via a [plugin](https://github.com/cssinjs/jss/blob/master/docs/plugins.md) API. - ⚡️ It uses [JSS](https://github.com/cssinjs/jss) at its core – a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JavaScript to CSS compiler which works at runtime and server-side. -- 📦 Less than [15 KB gzipped](https://bundlephobia.com/package/@mui/styles); and no bundle size increase if used alongside MUI. +- 📦 Less than [15 KB gzipped](https://bundlephobia.com/package/@mui/styles); and no bundle size increase if used alongside Material UI. ## Installation @@ -218,7 +218,7 @@ const useStyles = makeStyles((theme) => ({ ## Using the theme context -Starting from v5, MUI no longer uses JSS as its default styling solution. If you still want to use the utilities exported by `@mui/styles` and they depend on the `theme`, you will need to provide the `theme` as part of the context. For this, you can use the `ThemeProvider` component available in `@mui/styles`, or, if you are already using `@mui/material`, you should use the one exported from `@mui/material/styles` so that the same `theme` is available for components from '@mui/material'. +Starting from v5, Material UI no longer uses JSS as its default styling solution. If you still want to use the utilities exported by `@mui/styles` and they depend on the `theme`, you will need to provide the `theme` as part of the context. For this, you can use the `ThemeProvider` component available in `@mui/styles`, or, if you are already using `@mui/material`, you should use the one exported from `@mui/material/styles` so that the same `theme` is available for components from '@mui/material'. ```jsx import { makeStyles } from '@mui/styles'; diff --git a/docs/data/system/components/box/box.md b/docs/data/system/components/box/box.md index d8b6cdcda96115..a8b903804e94f7 100644 --- a/docs/data/system/components/box/box.md +++ b/docs/data/system/components/box/box.md @@ -38,7 +38,7 @@ For instance, you can change the margin this way. However, sometimes you have to target the underlying DOM element. As an example, you may want to change the border of the Button. The Button component defines its own styles. CSS inheritance doesn't help. -To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx-prop/) prop directly on the child if it is a MUI component. +To workaround the problem, you can use the [`sx`](/system/getting-started/the-sx-prop/) prop directly on the child if it is an MUI component. ```diff - diff --git a/docs/pages/blog/2019.md b/docs/pages/blog/2019.md index bf2eeafb974136..e12b38477e5234 100644 --- a/docs/pages/blog/2019.md +++ b/docs/pages/blog/2019.md @@ -101,5 +101,5 @@ Enterprise features will build on the open source version of the components. We are looking for a full-time Software Developer to join us! -If you want to help us onboard more full-time developers in the team, [here are a couple of ways](/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-project). +If you want to help us onboard more full-time developers in the team, [here are a couple of ways](/material-ui/getting-started/faq/#mui-is-awesome-how-can-i-support-the-company). Spreading the word to other developers that are looking for a great UI framework is also extremely helpful 🙌.