Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Doc] Update sx sections to point to the new SX documentation #9233

Merged
merged 2 commits into from
Aug 31, 2023
Merged

[Doc] Update sx sections to point to the new SX documentation #9233

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d618252
[Doc] Update sx sections to point to the new SX documentation
fzaninotto Aug 29, 2023
f35067a
Merge remote-tracking branch 'origin/master' into doc-link-to-theming
slax57 Aug 31, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions docs/AppBar.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export const MyAppBar = () => <AppBar color="primary" />;

## `sx`: CSS API

Pass an `sx` prop to customize the style of the main component and the underlying elements.
Pass an `sx` prop to customize the style of the main component and the underlying elements (see [the `sx` documentation](./SX.md) for syntax and examples).

{% raw %}
```jsx
Expand All @@ -176,7 +176,7 @@ This property accepts the following subclasses:
| `& .RaAppBar-menuButton` | Applied to the hamburger icon |
| `& .RaAppBar-title` | Applied to the title portal |

To override the style of `<AppBar>` using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaAppBar` key.
To override the style of `<AppBar>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaAppBar` key.

## `toolbar`

Expand Down
4 changes: 2 additions & 2 deletions docs/AutocompleteArrayInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,9 +414,9 @@ If you're using `<AutocompleteArrayInput>` inside a [`<ReferenceArrayInput>`](./

## `sx`: CSS API

The `<AutocompleteArrayInput>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)).
The `<AutocompleteArrayInput>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (see [the `sx` documentation](./SX.md) for syntax and examples).

`<AutocompleteArrayInput>` renders an [`<AutocompleteInput>`](./AutocompleteInput.md) and reuses its styles. To override the style of all instances of `<AutocompleteInput>` using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaAutocompleteInput` key.
`<AutocompleteArrayInput>` renders an [`<AutocompleteInput>`](./AutocompleteInput.md) and reuses its styles. To override the style of all instances of `<AutocompleteInput>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaAutocompleteInput` key.

Refer to the [Material UI `<Autocomplete>` component](https://mui.com/material-ui/react-autocomplete/) to know its CSS API.

Expand Down
4 changes: 2 additions & 2 deletions docs/AutocompleteInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -486,13 +486,13 @@ If you're using `<AutocompleteInput>` inside a [`<ReferenceInput>`](./ReferenceI

## `sx`: CSS API

The `<AutocompleteInput>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses:
The `<AutocompleteInput>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (see [the `sx` documentation](./SX.md) for syntax and examples). This property accepts the following subclasses:

| Rule name | Description |
|------------------------------|-------------------------------------------------|
| `& .RaSelectInput-textField` | Applied to the underlying `TextField` component |

To override the style of all instances of `<AutocompleteInput>` using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaAutocompleteInput` key.
To override the style of all instances of `<AutocompleteInput>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaAutocompleteInput` key.

Refer to the [Material UI `<Autocomplete>` component](https://mui.com/material-ui/react-autocomplete/) to know its CSS API.

Expand Down
4 changes: 2 additions & 2 deletions docs/BooleanField.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,9 +29,9 @@ import { BooleanField } from 'react-admin';

## `sx`: CSS API

The `<BooleanField>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)).
The `<BooleanField>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (see [the `sx` documentation](./SX.md) for syntax and examples).

To override the style of all instances of `<BooleanField>` using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaBooleanField` key.
To override the style of all instances of `<BooleanField>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaBooleanField` key.

## Usage

Expand Down
12 changes: 6 additions & 6 deletions docs/Buttons.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ It also supports [all the other `<Button>` props](#button).
|-----------------------------|--------------------------------------------------------------------|
| `&.RaCreateButton-floating` | Applied to the underlying `MuiFab` component used in small screens |

To override the style of all instances of `<CreateButton>` using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaCreateButton` key.
To override the style of all instances of `<CreateButton>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaCreateButton` key.

### `<ListButton>`

Expand Down Expand Up @@ -621,7 +621,7 @@ This button is an internal component used by react-admin in [the Filter button/f

#### `sx`: CSS API

To override the style of all instances of `<FilterButton>` using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaFilterButton` key.
To override the style of all instances of `<FilterButton>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaFilterButton` key.

## Record Buttons

Expand Down Expand Up @@ -736,7 +736,7 @@ Other props are passed down to [the underlying Material UI `<Button>`](https://m
| `& .RaButton-mediumIcon` | Applied to the Button's `children` when `size` prop is `medium` and `alignIcon` prop is 'right' |
| `& .RaButton-largeIcon` | Applied to the Button's `children` when `size` prop is `large` and `alignIcon` prop is 'right' |

To override the style of all instances of `<Button>` using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaButton` key.
To override the style of all instances of `<Button>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaButton` key.

### `<RefreshButton>`
### `<SkipNavigationButton>`
Expand All @@ -747,7 +747,7 @@ To override the style of all instances of `<Button>` using the [Material UI styl
|-----------------------------------------------|-------------------------------------------------|
| `&.RaSkipNavigationButton-skipToContentButton` | Applied to the underlying `MuiButton` component |

To override the style of all instances of `<SkipNavigationButton>` using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaSkipNavigationButton` key.
To override the style of all instances of `<SkipNavigationButton>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaSkipNavigationButton` key.

### `<MenuItemLink>`

Expand Down Expand Up @@ -836,7 +836,7 @@ See [The Menu documentation](./Menu.md) for more details.
| `&.RaMenuItemLink-active` | Applied to the underlying `MuiMenuItem`'s `activeClassName` prop |
| `& .RaMenuItemLink-icon` | Applied to the `ListItemIcon` component when `leftIcon` prop is set |

To override the style of all instances of `<MenuItemLink>` using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaMenuItemLink` key.
To override the style of all instances of `<MenuItemLink>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaMenuItemLink` key.

### `<UserMenu>`

Expand All @@ -853,6 +853,6 @@ To override the style of all instances of `<MenuItemLink>` using the [Material U
| `& .RaUserMenu-userButton` | Applied to the underlying `MuiButton` component when `useGetIdentity().loaded` is `true` and `useGetIdentity().identity.fullName` is set |
| `& .RaUserMenu-avatar` | Applied to the underlying `MuiAvatar` component when `useGetIdentity().avatar` is `true` |

To override the style of all instances of `<UserMenu>` using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaUserMenu` key.
To override the style of all instances of `<UserMenu>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaUserMenu` key.

See [The AppBar documentation](./AppBar.md#usermenu) for more details.
4 changes: 2 additions & 2 deletions docs/CheckboxGroupInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,13 +225,13 @@ By default, the checkboxes are displayed in a row. You can change that and let r

## `sx`: CSS API

The `<CheckboxGroupInput>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses:
The `<CheckboxGroupInput>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (see [the `sx` documentation](./SX.md) for syntax and examples). This property accepts the following subclasses:

| Rule name | Description |
|---------------------------------|----------------------------------------------------------|
| `& .RaCheckboxGroupInput-label` | Applied to the underlying Material UI's `FormLabel` component |

To override the style of all instances of `<CheckboxGroupInput>` using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaCheckboxGroupInput` key.
To override the style of all instances of `<CheckboxGroupInput>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaCheckboxGroupInput` key.

## `translateChoice`

Expand Down
4 changes: 2 additions & 2 deletions docs/ChipField.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,10 +33,10 @@ Additional props are passed down to Material UI's `<Chip>` element. Check [The M

## `sx`: CSS API

The `<ChipField>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses:
The `<ChipField>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (see [the `sx` documentation](./SX.md) for syntax and examples). This property accepts the following subclasses:

| Rule name | Description |
|----------------------|----------------------------------------------------------|
| `&.RaChipField-chip` | Applied to the underlying Material UI's `Chip` component |

To override the style of all instances of `<ChipField>` using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaChipField` key.
To override the style of all instances of `<ChipField>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaChipField` key.
4 changes: 2 additions & 2 deletions docs/Confirm.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -78,14 +78,14 @@ Text props such as `title`, `content`, `cancel`, `confirm` and `translateOptions

## `sx`: CSS API

The `<Confirm>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses:
The `<Confirm>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (see [the `sx` documentation](./SX.md) for syntax and examples). This property accepts the following subclasses:

| Rule name | Description |
|---------------------------------|----------------------------------------------------------------|
| `& .RaConfirm-confirmPrimary` | Applied to the confirm button when `confirmColor` is `primary` |
| `& .RaConfirm-confirmWarning` | Applied to the confirm button when `confirmColor` is `warning` |

To override the style of all instances of `<Confirm>` using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaConfirm` key.
To override the style of all instances of `<Confirm>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaConfirm` key.

## Delete With Confirmation

Expand Down
4 changes: 2 additions & 2 deletions docs/Create.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -290,15 +290,15 @@ const PostCreate = () => (

## `sx`: CSS API

The `<Create>` components accept the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following keys:
The `<Create>` components accept the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `sx` property (see [the `sx` documentation](./SX.md) for syntax and examples). This property accepts the following keys:

| Rule name | Description |
|-------------------------|--------------------------------------------------------------------------------------|
| `& .RaCreate-main` | Applied to the main container |
| `& .RaCreate-noActions` | Applied to the main container when `actions` prop is `false` |
| `& .RaCreate-card` | Applied to the child component inside the main container (Material UI's `Card` by default) |

To override the style of all instances of `<Create>` components using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaCreate` key.
To override the style of all instances of `<Create>` components using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaCreate` key.

## `title`

Expand Down
6 changes: 3 additions & 3 deletions docs/Datagrid.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -762,7 +762,9 @@ export const PostList = () => (

## `sx`: CSS API

The `<Datagrid>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property. This property accepts the following subclasses:
The `<Datagrid>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (see [the `sx` documentation](./SX.md) for syntax and examples).

This property accepts the following subclasses:

| Rule name | Description |
| ------------------------------ |--------------------------------------------------|
Expand Down Expand Up @@ -810,8 +812,6 @@ const PostList = () => (
```
{% endraw %}

**Tip**: `sx` is the standard for style customization in Material UI . Check [the sx documentation](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles) for more advanced usage.

**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)

## Configurable
Expand Down
4 changes: 2 additions & 2 deletions docs/DualListInput.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -236,7 +236,7 @@ const choices = [

## `sx`: CSS API

The `<DualListInput>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following subclasses:
The `<DualListInput>` component accepts the usual `className` prop. You can also override many styles of the inner components thanks to the `sx` property (see [the `sx` documentation](./SX.md) for syntax and examples). This property accepts the following subclasses:

| Rule name | Description |
|------------------------------------|----------------------------------|
Expand All @@ -251,7 +251,7 @@ The `<DualListInput>` component accepts the usual `className` prop. You can also
| `& .RaDualListInput-selectedList` | Applied to the selected list |
| `& .RaDualListInput-availableList` | Applied to the available list |

To override the style of all instances of `<DualListInput>` using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaDualListInput` key.
To override the style of all instances of `<DualListInput>` using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaDualListInput` key.


## `translateChoice`
Expand Down
4 changes: 2 additions & 2 deletions docs/Edit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -508,15 +508,15 @@ const PostEdit = () => (

## `sx`: CSS API

The `<Edit>` components accept the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `sx` property (as most Material UI components, see their [documentation about it](https://mui.com/material-ui/customization/how-to-customize/#overriding-nested-component-styles)). This property accepts the following keys:
The `<Edit>` components accept the usual `className` prop, but you can override many class names injected to the inner components by React-admin thanks to the `sx` property (see [the `sx` documentation](./SX.md) for syntax and examples). This property accepts the following keys:

| Rule name | Description |
|-------------------------|--------------------------------------------------------------------------------------|
| `& .RaEdit-main` | Applied to the main container |
| `& .RaEdit-noActions` | Applied to the main container when `actions` prop is `false` |
| `& .RaEdit-card` | Applied to the child component inside the main container (Material UI's `Card` by default) |

To override the style of all instances of `<Edit>` components using the [Material UI style overrides](https://mui.com/material-ui/customization/theme-components/#theme-style-overrides), use the `RaEdit` key.
To override the style of all instances of `<Edit>` components using the [application-wide style overrides](./AppTheme.md#theming-individual-components), use the `RaEdit` key.

## `title`

Expand Down
Loading