Add support for customization with MUI theme to main views components and buttons#10771
Merged
Add support for customization with MUI theme to main views components and buttons#10771
Conversation
f9586d4 to
a27f996
Compare
djhi
suggested changes
Jun 10, 2025
|
|
||
| declare module '@mui/material/styles' { | ||
| interface ComponentsPropsList { | ||
| [PREFIX]: Partial<BulkUpdateButtonProps>; |
Contributor
There was a problem hiding this comment.
I didn't expect referring to PREFIX would work here but it does. TIL 👍
We could simplify some other components I worked on.
djhi
approved these changes
Jun 12, 2025
| /> | ||
| </AdminContext> | ||
| ); | ||
| render(<Basic />); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Problem
Overriding React-admin defaults is cumbersome for many components, especially the most important ones: views and important actions such as
<DeleteButton>.Concrete use cases (to be implemented as stories and used for documentation):
Solution
In
ra-ui-materialuithere's a mechanism for that already: the theme. Although we use it for some components (see #10655), we now do it for views such as<List>,<Edit>,<Create>,<Show>and buttons that has variants such as<DeleteButton>,<UpdateButton>,<BulkDeleteButton>and<BulkUpdateButton>.How To Test
From Storybook
View a list, detail view or button you want to test with and try to change the default theme.
export const defaultLightTheme: ThemeOptions = deepmerge( defaultThemeInvariants, { //... components: { //... + RaCreate: { + defaultProps: { + className: 'custom-class', + mutationMode: 'optimistic', + }, + }, }, } );From simple example
To set the creation as undoable in every Create:
// ... root.render( <React.StrictMode> <Admin authProvider={authProvider} dataProvider={dataProvider} i18nProvider={i18nProvider} queryClient={queryClient} title="Example Admin" layout={Layout} + theme={deepmerge(defaultLightTheme, { + components: { + RaCreate: { + defaultProps: { + mutationMode: 'undoable', + }, + }, + }, + } as ThemeOptions)} > // ...Additional Checks
masterfor a bugfix or a documentation fix, ornextfor a feature