From 9918a9e53fe9af2b1051d88eecab1e2c4c3c0baa Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Tue, 29 Aug 2017 18:33:36 +0200 Subject: [PATCH] [docs] The style is injected at the bottom of the head --- docs/src/pages/customization/css-in-js.md | 2 +- docs/src/pages/customization/overrides.md | 4 +++- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/docs/src/pages/customization/css-in-js.md b/docs/src/pages/customization/css-in-js.md index a00fd611bb19af..34b4b37b8ac7a9 100644 --- a/docs/src/pages/customization/css-in-js.md +++ b/docs/src/pages/customization/css-in-js.md @@ -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 diff --git a/docs/src/pages/customization/overrides.md b/docs/src/pages/customization/overrides.md index cfad6e09e97237..db674180e9c69a 100644 --- a/docs/src/pages/customization/overrides.md +++ b/docs/src/pages/customization/overrides.md @@ -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 `` is injected at the top of the ``. 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 `` is injected at the bottom of the ``. +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'}}