Merge pull request #9646 from marmelab/feat/Update-AccordionForm-and-AccordionFormPanel-docs

Update AccordionForm and AccordionFormPanel docs

Author: slax57

docs/AccordionForm.md

@@ -84,19 +84,19 @@ Check [the `ra-form-layout` documentation](https://marmelab.com/ra-enterprise/mo
 
 Here are all the props you can set on the `<AccordionForm>` component:
 
-| Prop                     | Required | Type              | Default | Description                                                |
-| ------------------------ | -------- | ----------------- | ------- | ---------------------------------------------------------- |
-| `autoClose`              | Optional | `boolean`         | -       | Set to `true` to close the current accordion when opening another one. |
-| `children`               | Required | `ReactNode`       | -       | A list of `<AccordionForm.Panel>` elements.                   |
-| `defaultValues`          | Optional | `object|function` | -       | The default values of the record.                          |
-| `id`                     | Optional | `string`          | -       | The id of the underlying `<form>` tag.                     |
-| `noValidate`             | Optional | `boolean`         | -       | Set to `true` to disable the browser's default validation. |
-| `onSubmit`               | Optional | `function`        | `save`  | A callback to call when the form is submitted.             |
-| `sanitize EmptyValues`    | Optional | `boolean`         | -       | Set to `true` to remove empty values from the form state.  |
-| `toolbar`                | Optional | `ReactElement`    | -       | A custom toolbar element.                                  |
-| `validate`               | Optional | `function`        | -       | A function to validate the form values.                    |
-| `warnWhen UnsavedChanges` | Optional | `boolean`         | -       | Set to `true` to warn the user when leaving the form with unsaved changes. |
-
+| Prop                      | Required | Type              | Default | Description                                                                  |
+| ------------------------- | -------- | ----------------- | ------- | ---------------------------------------------------------------------------- |
+| `autoClose`               | Optional | `boolean`         | -       | Set to `true` to close the current accordion when opening another one.       |
+| `children`                | Required | `ReactNode`       | -       | A list of `<AccordionForm.Panel>` elements.                                  |
+| `defaultValues`           | Optional | `object|function` | -       | The default values of the record.                                            |
+| `id`                      | Optional | `string`          | -       | The id of the underlying `<form>` tag.                                       |
+| `noValidate`              | Optional | `boolean`         | -       | Set to `true` to disable the browser's default validation.                   |
+| `onSubmit`                | Optional | `function`        | `save`  | A callback to call when the form is submitted.                               |
+| `sanitize EmptyValues`    | Optional | `boolean`         | -       | Set to `true` to remove empty values from the form state.                    |
+| `toolbar`                 | Optional | `ReactElement`    | -       | A custom toolbar element.                                                    |
+| `validate`                | Optional | `function`        | -       | A function to validate the form values.                                      |
+| `warnWhen UnsavedChanges` | Optional | `boolean`         | -       | Set to `true` to warn the user when leaving the form with unsaved changes.   |
+| `sx`                      | Optional | `Object`          | -       | An object containing the MUI style overrides to apply to the root component. |
 
 Additional props are passed to `react-hook-form`'s [`useForm` hook](https://react-hook-form.com/docs/useform).
 
@@ -335,7 +335,7 @@ export const UserCreate = () => (
 
 ## `warnWhenUnsavedChanges`
 
-React-admin keeps track of the form state, so it can detect when the user leaves an `Edit` or `Create` page with unsaved changes. To avoid data loss, you can use this ability to ask the user to confirm before leaving a page with unsaved changes. 
+React-admin keeps track of the form state, so it can detect when the user leaves an `Edit` or `Create` page with unsaved changes. To avoid data loss, you can use this ability to ask the user to confirm before leaving a page with unsaved changes.
 
 ![Warn About Unsaved Changes](./img/warn_when_unsaved_changes.png)
 
@@ -353,6 +353,18 @@ export const TagEdit = () => (
 
 **Warning**: This feature only works if you have a dependency on react-router 6.3.0 **at most**. The react-router team disabled this possibility in react-router 6.4, so `warnWhenUnsavedChanges` will silently fail with react-router 6.4 or later.
 
+## `sx`: CSS API
+
+The `<AccordionForm>` component accepts the usual `className` prop. You can also override the styles of the inner components thanks to the `sx` property. This property accepts the following subclasses:
+
+| Rule name                    | Description                        |
+| ---------------------------- | ---------------------------------- |
+| `&.MuiBox-root`              | Applied to the root component      |
+| `&.MuiAccordion-root`        | Applied to all the Accordions      |
+| `&.Mui-expanded`             | Applied to the expanded Accordions |
+| `&.MuiAccordionSummary-root` | Applied to the Accordion's title   |
+| `&.MuiCollapse-root`         | Applied to the Accordion's content |
+
 ## `<AccordionForm.Panel>`
 
 The children of `<AccordionForm>` must be `<AccordionForm.Panel>` elements.
@@ -371,6 +383,7 @@ Here are all the props you can set on the `<AccordionForm.Panel>` component:
 | `defaultExpanded` | Optional | `boolean`   | `false` | Set to true to have the accordion expanded by default (except if autoClose = true on the parent) |
 | `disabled`        | Optional | `boolean`   | `false` | If true, the accordion will be displayed in a disabled state.                                    |
 | `square`          | Optional | `boolean`   | `false` | If true, rounded corners are disabled.                                                           |
+| `sx`              | Optional | `Object`    | -       | An object containing the MUI style overrides to apply to the root component.                     |
 
 ```tsx
 import {
@@ -520,7 +533,7 @@ Check [the `<AutoSave>` component](./AutoSave.md) documentation for more details
 
 ## Role-Based Access Control (RBAC)
 
-Fine-grained permissions control can be added by using the [`<AccordionForm>`](./AuthRBAC.md#accordionform), [`<AccordionFormPanel>`](./AuthRBAC.md#accordionform) and [`<AccordionSection>`](./AuthRBAC.md#accordionsection) components provided by the `@react-admin/ra-enterprise` package. 
+Fine-grained permissions control can be added by using the [`<AccordionForm>`](./AuthRBAC.md#accordionform), [`<AccordionFormPanel>`](./AuthRBAC.md#accordionform) and [`<AccordionSection>`](./AuthRBAC.md#accordionsection) components provided by the `@react-admin/ra-enterprise` package.
 
 {% raw %}
 ```tsx