Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[docs] Expand on the JSS and class name generator docs #12447

Merged
merged 3 commits into from
Aug 8, 2018
Merged

[docs] Expand on the JSS and class name generator docs #12447

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a2c80d3
Expand on the JSS and class name generator docs
atrauzzi Aug 8, 2018
ebeaac0
Consistent quotes.
atrauzzi Aug 8, 2018
8563b9d
small tweaks
oliviertassinari Aug 8, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
24 changes: 14 additions & 10 deletions docs/src/pages/getting-started/faq/faq.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,22 @@
If you still can't find what you're looking for, you can ask the community in [gitter](https://gitter.im/mui-org/material-ui).
For how-to questions and other non-issues, please use [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) instead of Github issues. There is a StackOverflow tag called `material-ui` that you can use to tag your questions.

## How to fix a class names conflict in production?

This is probably the n°1 issue people are facing starting with Material-UI.
The class names value relies on the concept of [class name generator](/customization/css-in-js#creategenerateclassname-options-class-name-generator).
The whole page needs to be rendered with **one generator**.
You might end up using two class name generators in a variety of contexts:
- You **bundle** two versions of Material-UI. You might have a dependency not correctly setting Material-UI as a peer dependency.
Each version of Material-UI uses its own default class name generator.
## Why aren't my components rendering correctly in production builds?

This is likely an n°1 issue that happens due to class name conflicts once your code is in a production bundle.
For Material-UI to work, the `classNames` values of all components on a page must be generated by a single instance of the [class name generator](/customization/css-in-js#creategenerateclassname-options-class-name-generator).

To correct this issue, all components on the page need to be initialized such that there is only ever **one class name generator** between them.

You could end up accidentally using two class name generators in a variety of scenarios:
- 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 `JssProvider` for a **subset** of your React Tree.
Material-UI has a default class name generator, `JssProvider` is providing a second one.
- You are using a bundler and it is splitting code in a way results in multiple class name generator instances to be created.
> If you are using webpack with the [SplitChunksPlugin](https://webpack.js.org/plugins/split-chunks-plugin/), try configuring the [`runtimeChunk` setting under `optimizations`](https://webpack.js.org/configuration/optimization/#optimization-runtimechunk).

Overall, it's simple to recover from this problem by wrapping each Material-UI application with [`JssProvider`](/customization/css-in-js#jssprovider) components at the top of their component trees **and using a single class name generator shared between them**.

It's simple to recover from this problem. Use the [`JssProvider`](/customization/css-in-js#jssprovider) component at the top of your React tree to inject a single class name generator.
[A resolution example](/customization/css-in-js#jssprovider). The last part of any solution will vary based on what bundler you are using, but the overall goal is to ensure the common module that contains the first snippet above only gets loaded and run once.

## Why do the fixed positioned elements move when a modal is opened?

Expand Down