From 4758b8bc0ede5d1419df62beed5ba112b2ac1476 Mon Sep 17 00:00:00 2001 From: asvarcas Date: Wed, 28 Oct 2020 11:58:18 -0300 Subject: [PATCH 1/2] Improve List and Datagrid docs --- docs/List.md | 27 +++++++++++++++------------ 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/docs/List.md b/docs/List.md index 33c34d84c3f..adcff9e9865 100644 --- a/docs/List.md +++ b/docs/List.md @@ -734,10 +734,11 @@ The `List` component accepts the usual `className` prop but you can override man | `bulkActionsDisplayed` | Applied to the child component inside the main container when there are selected records | | `noResults` | Applied to the component shown when there is no result | -You can customize the list styles by passing a `classes` object as prop, through `useStyles()`. Here is an example: +You can customize the `` styles by passing a `classes` object as prop, through `useStyles()`. Here is an example: {% raw %} ```jsx +import * as React from 'react'; import { makeStyles } from '@material-ui/core'; const useStyles = makeStyles({ @@ -2033,21 +2034,21 @@ export const PostList = props => ( The `Datagrid` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys: -* `table`: alternative to using `className`. Applied to the root element. -* `tbody`: applied to the tbody -* `headerCell`: applied to each header cell -* `row`: applied to each row -* `rowEven`: applied to each even row -* `rowOdd`: applied to each odd row -* `rowCell`: applied to each row cell - -Here is an example of how you can override some of these classes: +| Rule name | Description | +| ------------- | ---------------------------------------------------------------------------------------- | +| `table` | Alternative to using `className`. Applied to the root element | +| `tbody` | Applied to the actions container | +| `headerCell` | Applied to the main container | +| `row` | Applied to the child component inside the main container | +| `rowEven` | Applied to the child component inside the main container when there are selected records | +| `rowOdd` | Applied to the component shown when there is no result | +| `rowCell` | Applied to the component shown when there is no result | You can customize the `` styles by passing a `classes` object as prop, through `useStyles()`. Here is an example: {% raw %} ```jsx -import * as React from "react"; +import * as React from 'react'; import { makeStyles } from '@material-ui/core'; const useStyles = makeStyles({ @@ -2071,6 +2072,8 @@ export default PostList; ``` {% endraw %} +**Tip**: The `Datagrid` component `classes` can also be customized for all instances of the component with its global css name `"RaDatagrid"` as [describe here](https://marmelab.com/blog/2019/12/18/react-admin-3-1.html#theme-overrides) + **Tip**: If you want to override the `header` and `cell` styles independently for each column, use the `headerClassName` and `cellClassName` props in `` components. For instance, to hide a certain column on small screens: ```jsx @@ -2181,7 +2184,7 @@ const CustomList = () => { id), currentSort: { field: 'id', order: 'ASC' }, From 0e1a20840b393cdedd1fa4f07582bfec6379c985 Mon Sep 17 00:00:00 2001 From: asvarcas Date: Wed, 28 Oct 2020 12:02:28 -0300 Subject: [PATCH 2/2] Fix Datagrid css rules descriptions --- docs/List.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/docs/List.md b/docs/List.md index adcff9e9865..4ee8e94be7c 100644 --- a/docs/List.md +++ b/docs/List.md @@ -2034,15 +2034,15 @@ export const PostList = props => ( The `Datagrid` component accepts the usual `className` prop but you can override many class names injected to the inner components by React-admin thanks to the `classes` property (as most Material UI components, see their [documentation about it](https://material-ui.com/customization/components/#overriding-styles-with-classes)). This property accepts the following keys: -| Rule name | Description | -| ------------- | ---------------------------------------------------------------------------------------- | -| `table` | Alternative to using `className`. Applied to the root element | -| `tbody` | Applied to the actions container | -| `headerCell` | Applied to the main container | -| `row` | Applied to the child component inside the main container | -| `rowEven` | Applied to the child component inside the main container when there are selected records | -| `rowOdd` | Applied to the component shown when there is no result | -| `rowCell` | Applied to the component shown when there is no result | +| Rule name | Description | +| ------------- | ------------------------------------------------------------- | +| `table` | Alternative to using `className`. Applied to the root element | +| `tbody` | Applied to the tbody | +| `headerCell` | Applied to each header cell | +| `row` | Applied to each row | +| `rowEven` | Applied to each even row | +| `rowOdd` | Applied to the each odd row | +| `rowCell` | Applied to the each row cell | You can customize the `` styles by passing a `classes` object as prop, through `useStyles()`. Here is an example: