diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md index e08c65e6aa3..06ad706f66e 100644 --- a/docs/CreateEdit.md +++ b/docs/CreateEdit.md @@ -1625,6 +1625,7 @@ export const PostEdit = (props) => ( Here are the props received by the `Toolbar` component when passed as the `toolbar` prop of the `SimpleForm` or `TabbedForm` components: +* `alwaysEnableSaveButton`: Force enabling the ``. If it's not defined, the `` will be enabled using the `pristine` prop (disabled if pristine, enabled otherwise). * `handleSubmitWithRedirect`: The function to call in order to submit the form. It accepts a single parameter overriding the form's default redirect. * `handleSubmit` which is the same prop as in [react-final-form](https://final-form.org/docs/react-final-form/types/FormRenderProps#handlesubmit) * `invalid`: A boolean indicating whether the form is invalid @@ -1632,6 +1633,21 @@ Here are the props received by the `Toolbar` component when passed as the `toolb * `redirect`: The default form's redirect * `saving`: A boolean indicating whether a save operation is ongoing. * `submitOnEnter`: A boolean indicating whether the form should be submitted when pressing `enter` +* `width`: A string apply to the mobile or desktop classes depending on its value. Pass `xs` to display the mobile version. + +### CSS API + +The `` 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 | +| ---------------- | ------------------------------------------------------------------------------- | +| `toolbar` | Applied to the underlying `MuiToolbar` component | +| `defaultToolbar` | Applied to the container of the `` buttons when no children are passed | +| `desktopToolbar` | Applied to the underlying `MuiToolbar` component when `width` prop is not `xs` | +| `mobileToolbar` | Applied to the underlying `MuiToolbar` component when `width` prop is `xs` | +| `spacer` | Applied to the div below the underlying `MuiToolbar` used as spacer | + +To override the style of all instances of `` components using the [material-ui style overrides](https://material-ui.com/customization/globals/#css), use the `RaToolbar` key. **Tip**: Use react-admin's `` component instead of material-ui's `` component. The former builds upon the latter and adds support for an alternative mobile layout (and is therefore responsive). diff --git a/packages/ra-ui-materialui/src/form/Toolbar.tsx b/packages/ra-ui-materialui/src/form/Toolbar.tsx index 3b51942aecf..6da22b8de54 100644 --- a/packages/ra-ui-materialui/src/form/Toolbar.tsx +++ b/packages/ra-ui-materialui/src/form/Toolbar.tsx @@ -91,7 +91,7 @@ const valueOrDefault = (value, defaultValue) => * @typedef {Object} Props the props you can use (other props are injected by the ) * @prop {boolean} alwaysEnableSaveButton Force enabling the . If it's not defined, the will be enabled using the `pristine` prop (disabled if pristine, enabled otherwise). * @prop {ReactElement[]} children Customize the buttons you want to display in the . - * @prop {string} width Apply the mobile or the desktop classes depending on the width. Pass "xs" to display the mobile version. + * @prop {string} width Apply to the mobile or desktop classes depending on its value. Pass `xs` to display the mobile version. * */ const Toolbar: FC = props => {