-
-
Notifications
You must be signed in to change notification settings - Fork 5.2k
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.
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
Custom theme: styleOverrides on Ra* components are not applied #7604
Comments
Hi! I believe you're not trying to do exactly the same thing with your MUI component and your RA component, since on one hand you override the root component and on the other hand you try to override the "content" subcomponent. The syntax you wrote used to work with MUI v4 but I believe this has changed with MUI v5. Below is the way you can achieve this now: const theme = _.merge({}, defaultTheme, {
components: {
MuiIconButton: {
styleOverrides: {
root: {
// works as expected
color: "red"
}
}
},
RaList: {
styleOverrides: {
root: {
backgroundColor: "red",
"& .RaList-content": {
backgroundColor: "blue"
}
}
}
}
}
}); Hope this helps. |
It's, or at least should be, the same thing. Though I realize my original example wasn't clear on that, I've updated the sandbox and here is a new snippet: const theme = _.merge({}, defaultTheme, {
components: {
MuiButton: {
styleOverrides: {
root: {
// works as expected
border: "5px solid red"
},
startIcon: {
// works as expected
color: "red"
}
}
},
RaList: {
styleOverrides: {
root: {
// works as expected
backgroundColor: "green"
},
content: {
// does not work
backgroundColor: "red"
}
}
}
}
}); See also some of the examples from the MUI documentation: https://mui.com/material-ui/customization/theme-components/#global-style-overrides Your code works as a workaround, however this issue should definitely not be closed as it stands IMO. |
I haven't fully understood how MUI wants it now in v5, but from what I understand the I believe something along these lines should work: overridesResolver: (props, styles) => {
return [
styles.root,
{
[`& .${ListClasses.main}`]: styles.main,
[`& .${ListClasses.content}`]: styles.content,
[`& .${ListClasses.actions}`]: styles.actions,
[`& .${ListClasses.noResults}`]: styles.noResults
}
];
}, |
Thanks for the details even though I don't like it 😂 Feel free to help us fix them ;-) I'm marking this as an enhancement as there are workarounds |
PR created. |
All in all, I don' think this is a bug. You can override styles in react-admin components by the complete class name: const theme = _.merge({}, defaultTheme, {
components: {
RaList: {
styleOverrides: {
root: {
'& .RaList-content': {
backgroundColor: "red"
}
}
}
}
}
}); This is the way that is documented (albeit poorly) in the Theming section and in the individual component docs (ex: List view styles) I understand that it's not MUI's way, but there are 2 reasons I don't want to go their path:
So I think we'll stay with out approach. the Theming documentation needs to be updated, though. |
Hm, I'd like to counter those arguments (and add some in support of this):
|
Thanks for your input. I understand your point of view, and in my opinion there is no clear winner. We need to find the best compromise that leads to the best DX. I updated the documentation in #7636 to make the current implementation explicit. To me, the doc is complex enough without explaining yet another way of overriding styles. And my experience with MUI style overrides is that they are a pain, as you cannot override anything without looking at their doc. Regarding the ability to change HTML without changing the style overrides, to me that's a breaking change and it should not happen. As for the TypeScript check, I agree that it's a big plus, but it comes with a huge cost for us. Maintaining these types in addition to the style overrides itself is really not something I want to spend my time on. |
To me it looks like the example in the "Global Theme Overrides" section in documentation is wrong: import { defaultTheme } from 'react-admin';
const theme = {
...defaultTheme,
components: {
...defaultTheme.components,
RaDatagrid: {
+ styleOverrides: {
root: {
backgroundColor: "Lavender",
"& .RaDatagrid-headerCell": {
backgroundColor: "MistyRose",
},
}
+ }
}
}
};
const App = () => (
<Admin theme={theme}>
// ...
</Admin>
); Also I noticed that the overrides in the theme only apply after refreshing the page. Hot-Reload doesn't work for me. |
Also, it looks like the function style notation with access to the theme does not work (error in console):
Throws:
UPDATE: Here's how it is supposed to be and works now: RaTabbedShowLayout: {
styleOverrides: {
- root: {
- '& .RaTabbedShowLayout-content': ({ theme }: any) => ({
+ root: ({ theme }: any) => ({
+ '& .RaTabbedShowLayout-content': {
display: 'block',
// account for datagrid inside Tab
marginTop: theme.spacing(-1),
marginLeft: theme.spacing(-2),
marginRight: theme.spacing(-2),
- }),
- },
+ },
+ }),
},
}, |
Well spotted! Would you like to open a PR to fix it? |
Fixed by #7727 |
What you were expecting:
It being possible to override styles of Ra* components in the theme as in v3.
What happened instead:
Styles specified in the theme are not applied. Styles on Mui* components are, however, applied as expected.
Steps to reproduce:
styleOverrides
on react-admin components (see below)Related code:
https://codesandbox.io/s/determined-wilson-k6ifbu?file=/src/index.tsx:722-1068
Other information:
Environment
The text was updated successfully, but these errors were encountered: