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

Jump to bottom

[docs] The style is injected at the bottom of the head #7954

Merged
merged 1 commit into from Aug 29, 2017
Merged

[docs] The style is injected at the bottom of the head #7954

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/src/pages/customization/css-in-js.md
View file
Open in desktop
Expand Up @@ -24,7 +24,7 @@ The styling solution of Material-UI is using [JSS](https://github.com/cssinjs/js
It's a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JS to CSS compiler which works at runtime and server-side.
It is about 5KB (minified and gzipped) and is extensible via a [plugins](https://github.com/cssinjs/jss/blob/master/docs/plugins.md) API.

If you end up using that styling solution in your codebase, you're going to need to *learn the API*.
If you end up using this styling solution in your codebase, you're going to need to *learn the API*.
The best place to start is by looking at the features each [plugin](http://cssinjs.org/plugins) is providing. Material-UI is using the [`jss-preset-default`](http://cssinjs.org/jss-preset-default) module. You can always add new plugins if needed with the [`JssProvider` helper](https://github.com/cssinjs/react-jss#custom-setup).

## Sheets registry
Expand Down
4 changes: 3 additions & 1 deletion docs/src/pages/customization/overrides.md
View file
Open in desktop
Expand Up @@ -18,8 +18,10 @@ The first way to override the style of a component is to use **class names**.
Every component provides a `className` property.
These properties are always applied to the root element.

The CSS injected by Material-UI to style a component has the lowest specificity possible as the `<link />` is injected at the top of the `<head />`. If you are experiencing a CSS injection order issue, take a look at [the mechanism JSS provides](https://github.com/cssinjs/jss/blob/master/docs/setup.md#specify-dom-insertion-point) on how to handle this situation.
The CSS injected by Material-UI to style a component has the highest specificity possible as the `<link />` is injected at the bottom of the `<head />`.
This way, we ensure our components always render correctly.

But, you might also want to override our styles. If you are experiencing a CSS injection order issue, take a look at [the mechanism JSS provides](https://github.com/cssinjs/jss/blob/master/docs/setup.md#specify-dom-insertion-point) on how to handle this situation.
By adjusting the placement of the `insertionPoint` comment within your HTML body [you can control the order that the CSS rules are applied to your components](http://cssinjs.org/js-api/#setup-jss-instance).

{{demo='pages/customization/OverridesClassNames.js'}}
Expand Down