From 95d72435632073e180ae5db5cbca72a75d3dd9e6 Mon Sep 17 00:00:00 2001 From: fzaninotto Date: Wed, 24 Jul 2019 18:39:44 +0200 Subject: [PATCH] Use useStyles in documentation Refs #3453 --- docs/CreateEdit.md | 39 +++++++++++++++++++++------------------ docs/Fields.md | 41 +++++++++++++++++++++-------------------- docs/Tutorial.md | 29 +++++++++++++++++------------ 3 files changed, 59 insertions(+), 50 deletions(-) diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md index daa4bb2220f..de699f20616 100644 --- 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 => ( - +const CustomToolbar = props => ( + @@ -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 }) => ( - - - - - {/* This input will be display below the two first ones */} - - - +}); + +export const UserEdit = props => { + const classes = useStyles(); + return ( + + + + + {/* This input will be display below the two first ones */} + + + + ) +} ``` -{% endraw %} ## Displaying Fields or Inputs depending on the user permissions diff --git a/docs/Fields.md b/docs/Fields.md index 8f52942e774..f02e87f8360 100644 --- 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 }) => ( - -)); +const PriceField = props => { + const classes = useStyles(); + return ; +}; export const ProductList = (props) => ( @@ -803,7 +803,6 @@ export const ProductList = (props) => ( // renders in the datagrid as 2 ``` -{% 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. @@ -811,15 +810,16 @@ You may want to customize the cell style inside a `DataGrid`. You can use the `c {% 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 }) => ( - -)); +const PriceField = props => { + const classes = useStyles(); + return ; +}; export const ProductList = (props) => ( @@ -838,15 +838,16 @@ You may want to override the field header (the `` 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 }) => ( - -)); +const PriceField = props => { + const classes = useStyles(); + return ; +} export const ProductList = (props) => ( diff --git a/docs/Tutorial.md b/docs/Tutorial.md index 6fc2a2ec87a..38bd35c9cfe 100644 --- a/docs/Tutorial.md +++ b/docs/Tutorial.md @@ -271,10 +271,10 @@ 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', }, @@ -282,23 +282,28 @@ const styles = { width: '0.5em', paddingLeft: 2, }, -}; - -const MyUrlField = ({ record = {}, source, classes }) => - - {record[source]} - - ; +}); + +const MyUrlField = ({ record = {}, source }) => { + const classes = useStyles(); + return ( + + {record[source]} + + ; + ); +} -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