Skip to content

Commit

Permalink
[docs] Improve /styles vs /core/styles description
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Sep 29, 2019
1 parent 7aea490 commit 8b85c7e
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 12 deletions.
12 changes: 0 additions & 12 deletions docs/src/pages/customization/default-theme/default-theme.md
Original file line number Diff line number Diff line change
Expand Up @@ -14,15 +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`.

For practical usage (such as styling a Material-UI component instance), please import the style modules (`makeStyles`, `withStyles` and `styled`) from `@material-ui/core/styles`.
18 changes: 18 additions & 0 deletions docs/src/pages/styles/basics/basics.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 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 install multiple dependencies, the `@material-ui/styles` modules are re-exported from `@material-ui/core/styles` (with a default theme).

For instance:

```jsx
// Re-export with a default theme
import { makeStyles } from '@material-ui/core/styles';

// Original module
import { makeStyles } from '@material-ui/styles';
```

0 comments on commit 8b85c7e

Please sign in to comment.