From a9ca3ca10a150a6b38b8729378d9b8add887112c Mon Sep 17 00:00:00 2001 From: Tony DeFreitas Date: Tue, 1 Oct 2019 04:04:02 -0700 Subject: [PATCH] [docs] Improve /styles vs /core/styles description (#16473) --- .../default-theme/default-theme.md | 10 ---------- docs/src/pages/styles/basics/basics.md | 18 ++++++++++++++++++ 2 files changed, 18 insertions(+), 10 deletions(-) diff --git a/docs/src/pages/customization/default-theme/default-theme.md b/docs/src/pages/customization/default-theme/default-theme.md index 089c85dd15d86f..99d6ef8cbfa701 100644 --- a/docs/src/pages/customization/default-theme/default-theme.md +++ b/docs/src/pages/customization/default-theme/default-theme.md @@ -14,13 +14,3 @@ Please note that the documentation site is using a custom theme. If you want to learn more about how the theme is assembled, take a look at [`material-ui/style/createMuiTheme.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/styles/createMuiTheme.js), and the related imports which `createMuiTheme` uses. - -## @material-ui/core/styles vs @material-ui/styles - -Material-UI styles are powered by the [@material-ui/styles](/styles/basics/) npm package. It's a styling solution for React. -This solution is [isolated](https://bundlephobia.com/result?p=@material-ui/styles), it has has no knowledge of the default Material-UI theme. -To remove the need for injecting a theme in the React's context **systematically**, we are wrapping the style modules (`makeStyles`, `withStyles` and `styled`) with the default Material-UI theme: - -- `@material-ui/core/styles/makeStyles` wraps `@material-ui/styles/makeStyles`. -- `@material-ui/core/styles/withStyles` wraps `@material-ui/styles/withStyles`. -- `@material-ui/core/styles/styled` wraps `@material-ui/styles/styled`. diff --git a/docs/src/pages/styles/basics/basics.md b/docs/src/pages/styles/basics/basics.md index 9af850a0d26080..2e3d4a918b092a 100644 --- a/docs/src/pages/styles/basics/basics.md +++ b/docs/src/pages/styles/basics/basics.md @@ -202,3 +202,21 @@ const useStyles = makeStyles(theme => ({ ``` {{"demo": "pages/styles/basics/StressTest.js"}} + +## @material-ui/styles vs @material-ui/core/styles + +Material-UI styles are powered by the [@material-ui/styles](https://www.npmjs.com/package/@material-ui/styles) npm package (and JSS). +This solution is [isolated](https://bundlephobia.com/result?p=@material-ui/styles), it does not know about the default Material-UI theme. +It can be used to style React applications that are not using Material-UI framework. + +To remove the need for injecting a theme in the React's context **systematically** and to reduce the number of manual installations a developer needs to do, the `@material-ui/styles` modules are re-exported from `@material-ui/core/styles` (with a default theme). + +For instance: + +```js +// Re-export with a default theme +import { makeStyles } from '@material-ui/core/styles'; + +// Original module +import { makeStyles } from '@material-ui/styles'; +```