Use useStyles in documentation

Refs #3453
marmelab · Jul 24, 2019 · 95d7243 · 95d7243
1 parent a4a6a10
commit 95d7243
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 50 deletions.
diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md
@@ -200,17 +200,17 @@ import {
     Edit,
     SimpleForm,
 } from 'react-admin';
-import { withStyles } from '@material-ui/core';
+import { makeStyles } from '@material-ui/core/styles';
 
-const toolbarStyles = {
+const useStyles = makeStyles({
     toolbar: {
         display: 'flex',
         justifyContent: 'space-between',
     },
-};
+});
 
-const CustomToolbar = withStyles(toolbarStyles)(props => (
-    <Toolbar {...props}>
+const CustomToolbar = props => (
+    <Toolbar {...props} classes={useStyles()}>
         <SaveButton />
         <DeleteButton undoable={false} />
     </Toolbar>
@@ -819,22 +819,25 @@ Here are the props received by the `Toolbar` component when passed as the `toolb
 
 The input components are wrapped inside a `div` to ensure a good looking form by default. You can pass a `formClassName` prop to the input components to customize the style of this `div`. For example, here is how to display two inputs on the same line:
 
-{% raw %}
 ```jsx
-const styles = {
+const useStyles = makeStyles({
     inlineBlock: { display: 'inline-flex', marginRight: '1rem' },
-};
-export const UserEdit = withStyles(styles)(({ classes, ...props }) => (
-    <Edit {...props}>
-        <SimpleForm>
-            <TextInput source="first_name" formClassName={classes.inlineBlock} />
-            <TextInput source="last_name" formClassName={classes.inlineBlock} />
-            {/* This input will be display below the two first ones */}
-            <TextInput source="email" type="email" />
-        </SimpleForm>
-    </Edit>
+});
+
+export const UserEdit = props => {
+    const classes = useStyles();
+    return (
+        <Edit {...props}>
+            <SimpleForm>
+                <TextInput source="first_name" formClassName={classes.inlineBlock} />
+                <TextInput source="last_name" formClassName={classes.inlineBlock} />
+                {/* This input will be display below the two first ones */}
+                <TextInput source="email" type="email" />
+            </SimpleForm>
+        </Edit>
+    )
+}
 ```
-{% endraw %}
 
 ## Displaying Fields or Inputs depending on the user permissions
 

diff --git a/docs/Fields.md b/docs/Fields.md
@@ -780,17 +780,17 @@ import { UrlField } from 'react-admin';
 
 All field components accept a `className` prop, allowing you to customize their style to your liking. We advise you to use the Material UI styling solution, JSS, to generate those classes. See their [documentation](https://material-ui.com/customization/css-in-js/#api) about that.
 
-{% raw %}
 ```jsx
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
-const styles = {
+const useStyles = makeStyles({
     price: { color: 'purple' },
-};
+});
 
-const PriceField = withStyles(styles)(({ classes, ...props }) => (
-    <TextField className={classes.price} {...props} />
-));
+const PriceField = props => {
+    const classes = useStyles();
+    return <TextField className={classes.price} {...props} />;
+};
 
 export const ProductList = (props) => (
     <List {...props}>
@@ -803,23 +803,23 @@ export const ProductList = (props) => (
 // renders in the datagrid as
 <td><span class="[class name generated by JSS]">2</span></td>
 ```
-{% endraw %}
 
 React-admin usually delegates the rendering of fields components to material-ui components. Refer to the material-ui documentation to see the default styles for elements.
 
 You may want to customize the cell style inside a `DataGrid`. You can use the `cellClassName` for that:
 
 {% raw %}
 ```jsx
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
-const styles = {
+const useStyles = makeStyles({
     priceCell: { fontWeight: 'bold' },
-};
+});
 
-const PriceField = withStyles(styles)(({ classes, ...props }) => (
-    <TextField cellClassName={classes.priceCell} {...props} />
-));
+const PriceField = props => {
+    const classes = useStyles();
+    return <TextField cellClassName={classes.priceCell} {...props} />;
+};
 
 export const ProductList = (props) => (
     <List {...props}>
@@ -838,15 +838,16 @@ You may want to override the field header (the `<th>` element in the datagrid).
 
 {% raw %}
 ```jsx
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 
-const styles = {
+const useStyles = makeStyles({
     priceHeader: { fontWeight: 'bold' },
-};
+});
 
-const PriceField = withStyles(styles)(({ classes, ...props }) => (
-    <TextField headerClassName={classes.priceHeader} {...props} />
-));
+const PriceField = props => {
+    const classes = useStyles();
+    return <TextField headerClassName={classes.priceHeader} {...props} />;
+}
 
 export const ProductList = (props) => (
     <List {...props}>

diff --git a/docs/Tutorial.md b/docs/Tutorial.md
@@ -271,34 +271,39 @@ The `MyUrlField` component is a perfect opportunity to illustrate how to customi
 ```jsx
 // in src/MyUrlField.js
 import React from 'react';
-import { withStyles } from '@material-ui/core/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import LaunchIcon from '@material-ui/icons/Launch';
 
-const styles = {
+const useStyles = makeStyles({
     link: {
         textDecoration: 'none',
     },
     icon: {
         width: '0.5em',
         paddingLeft: 2,
     },
-};
-
-const MyUrlField = ({ record = {}, source, classes }) =>
-    <a href={record[source]} className={classes.link}>
-        {record[source]}
-        <LaunchIcon className={classes.icon} />
-    </a>;
+});
+
+const MyUrlField = ({ record = {}, source }) => {
+    const classes = useStyles();
+    return (
+        <a href={record[source]} className={classes.link}>
+            {record[source]}
+            <LaunchIcon className={classes.icon} />
+        </a>;
+    );
+}
 
-export default withStyles(styles)(MyUrlField);
+export default MyUrlField;
 ```
 
 ![Custom styles](./img/tutorial_custom_styles.png)
 
-In JSS, you define styles as a JavaScript object, using the JS variants of the CSS property names (e.g. `textDecoration` instead of `text-decoration`). To pass these styles to the component, wrap it inside a call to `withStyles(styles)`. JSS will create new class names for these styles, insert them (once) in the HTML document, and pass the new class names as a new `classes` property. Then, use these names in a `className` prop, as you would with a regular CSS class.
+In JSS, you define styles as a JavaScript object, using the JS variants of the CSS property names (e.g. `textDecoration` instead of `text-decoration`). To pass these styles to the component, use `makeStyles` to build a React hook. The hook will create new class names for these styles, and return the new class names in the `classes` object. Then, use these names in a `className` prop, as you would with a regular CSS class.
 
-**Tip**: There is much more to JSS than what this tutorial covers. Read the [material-ui documentation](https://material-ui.com/) to learn more about theming, vendor prefixes, responsive utilities, etc.
+**Tip**: There is much more to JSS than what this tutorial covers. Read the [material-ui documentation](https://material-ui.com/styles/basics) to learn more about theming, vendor prefixes, responsive utilities, etc.
 
+**Tip**: Material-ui supports other CSS-in-JS solutions, including [Styled components](https://material-ui.com/styles/basics/#styled-components-api).
 
 ## Handling Relationships