Fix style overrides for Ra* components

Fixes: #7604
marmelab · May 2, 2022 · c558aa5 · c558aa5
1 parent f08bd9c
commit c558aa5
Show file tree

Hide file tree

Showing 79 changed files with 166 additions and 78 deletions.
diff --git a/packages/ra-ui-materialui/src/Labeled.tsx b/packages/ra-ui-materialui/src/Labeled.tsx
@@ -7,6 +7,7 @@ import clsx from 'clsx';
 
 import { FieldTitle } from 'ra-core';
 import { ResponsiveStyleValue } from '@mui/system';
+import { makeOverridesResolver } from './detail/makeOverridesResolver';
 
 /**
  * Wrap a field or an input with a label if necessary.
@@ -89,7 +90,7 @@ export const LabeledClasses = {
 
 const Root = styled(Stack, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver(LabeledClasses),
 })(({ theme }) => ({
     display: 'inline-flex',
     marginBottom: '0.2em',

diff --git a/packages/ra-ui-materialui/src/auth/Login.tsx b/packages/ra-ui-materialui/src/auth/Login.tsx
@@ -8,6 +8,7 @@ import { useNavigate } from 'react-router-dom';
 import { useCheckAuth } from 'ra-core';
 
 import { LoginForm as DefaultLoginForm } from './LoginForm';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 /**
  * A standalone login page, to serve as authentication gate to the admin
@@ -95,7 +96,7 @@ export const LoginClasses = {
 
 const Root = styled('div', {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver(LoginClasses),
 })(({ theme }) => ({
     display: 'flex',
     flexDirection: 'column',

diff --git a/packages/ra-ui-materialui/src/auth/LoginForm.tsx b/packages/ra-ui-materialui/src/auth/LoginForm.tsx
@@ -11,6 +11,7 @@ import {
     useSafeSetState,
 } from 'ra-core';
 import { TextInput } from '../input';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 export const LoginForm = (props: LoginFormProps) => {
     const { redirectTo, className } = props;
@@ -105,7 +106,7 @@ export const LoginFormClasses = {
 
 const StyledForm = styled(Form, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver(LoginFormClasses),
 })(({ theme }) => ({
     [`& .${LoginFormClasses.content}`]: {
         width: 300,

diff --git a/packages/ra-ui-materialui/src/auth/Logout.tsx b/packages/ra-ui-materialui/src/auth/Logout.tsx
@@ -13,6 +13,7 @@ import { MenuItemProps } from '@mui/material/MenuItem';
 import ExitIcon from '@mui/icons-material/PowerSettingsNew';
 import clsx from 'clsx';
 import { useTranslate, useLogout } from 'ra-core';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 /**
  * Logout button component, to be passed to the Admin component
@@ -65,7 +66,7 @@ export const LogoutClasses = {
 
 const StyledMenuItem = styled(MenuItem, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver(LogoutClasses),
 })(({ theme }) => ({
     color: theme.palette.text.secondary,
 

diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx
@@ -19,6 +19,7 @@ import {
 import { Confirm } from '../layout';
 import { Button, ButtonProps } from './Button';
 import { BulkActionProps } from '../types';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 export const BulkDeleteWithConfirmButton = (
     props: BulkDeleteWithConfirmButtonProps
@@ -153,7 +154,7 @@ const PREFIX = 'RaBulkDeleteWithConfirmButton';
 
 const StyledButton = styled(Button, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver({}),
 })(({ theme }) => ({
     color: theme.palette.error.main,
     '&:hover': {

diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx
@@ -15,6 +15,7 @@ import {
 
 import { Button, ButtonProps } from './Button';
 import { BulkActionProps } from '../types';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 export const BulkDeleteWithUndoButton = (
     props: BulkDeleteWithUndoButtonProps
@@ -105,7 +106,7 @@ const PREFIX = 'RaBulkDeleteWithUndoButton';
 
 const StyledButton = styled(Button, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver({}),
 })(({ theme }) => ({
     color: theme.palette.error.main,
     '&:hover': {

diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx
@@ -18,6 +18,7 @@ import {
 import { Confirm } from '../layout';
 import { Button, ButtonProps } from './Button';
 import { BulkActionProps } from '../types';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 export const BulkUpdateWithConfirmButton = (
     props: BulkUpdateWithConfirmButtonProps
@@ -171,7 +172,7 @@ const PREFIX = 'RaBulkUpdateWithConfirmButton';
 
 const StyledButton = styled(Button, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver({}),
 })(({ theme }) => ({
     color: theme.palette.primary.main,
     '&:hover': {

diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateWithUndoButton.tsx
@@ -15,6 +15,7 @@ import {
 
 import { Button, ButtonProps } from './Button';
 import { BulkActionProps } from '../types';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 export const BulkUpdateWithUndoButton = (
     props: BulkUpdateWithUndoButtonProps
@@ -123,7 +124,7 @@ const PREFIX = 'RaBulkUpdateWithUndoButton';
 
 const StyledButton = styled(Button, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver({}),
 })(({ theme }) => ({
     color: theme.palette.primary.main,
     '&:hover': {

diff --git a/packages/ra-ui-materialui/src/button/Button.tsx b/packages/ra-ui-materialui/src/button/Button.tsx
@@ -18,6 +18,7 @@ import {
     useTranslate,
 } from 'ra-core';
 import { Path } from 'react-router';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 export type LocationDescriptor = Partial<Path> & {
     redirect?: boolean;
@@ -149,7 +150,7 @@ const PREFIX = 'RaButton';
 
 const StyledButton = styled(MuiButton, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver({}),
 })({
     '&.MuiButton-sizeSmall': {
         // fix for icon misalignment on small buttons, see https://github.com/mui/material-ui/pull/30240

diff --git a/packages/ra-ui-materialui/src/button/CreateButton.tsx b/packages/ra-ui-materialui/src/button/CreateButton.tsx
@@ -9,6 +9,7 @@ import { Link } from 'react-router-dom';
 import { useTranslate, useResourceContext, useCreatePath } from 'ra-core';
 
 import { Button, ButtonProps, sanitizeButtonRestProps } from './Button';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 /**
  * Opens the Create view of a given resource
@@ -98,7 +99,7 @@ export const CreateButtonClasses = {
 
 const StyledFab = styled(Fab, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver(CreateButtonClasses),
 })(({ theme }) => ({
     [`&.${CreateButtonClasses.floating}`]: {
         color: theme.palette.getContrastText(theme.palette.primary.main),

diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx
@@ -19,6 +19,7 @@ import {
 
 import { Confirm } from '../layout';
 import { Button, ButtonProps } from './Button';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
     props: DeleteWithConfirmButtonProps<RecordType>
@@ -136,7 +137,7 @@ const PREFIX = 'RaDeleteWithConfirmButton';
 
 const StyledButton = styled(Button, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver({}),
 })(({ theme }) => ({
     color: theme.palette.error.main,
     '&:hover': {

diff --git a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.tsx b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.tsx
@@ -16,6 +16,7 @@ import {
 } from 'ra-core';
 
 import { Button, ButtonProps } from './Button';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 export const DeleteWithUndoButton = <RecordType extends RaRecord = any>(
     props: DeleteWithUndoButtonProps<RecordType>
@@ -90,7 +91,7 @@ const PREFIX = 'RaDeleteWithUndoButton';
 
 const StyledButton = styled(Button, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver({}),
 })(({ theme }) => ({
     color: theme.palette.error.main,
     '&:hover': {

diff --git a/packages/ra-ui-materialui/src/button/LocalesMenuButton.tsx b/packages/ra-ui-materialui/src/button/LocalesMenuButton.tsx
@@ -4,6 +4,7 @@ import { useLocaleState } from 'ra-core';
 import { Box, Button, Menu, MenuItem, styled } from '@mui/material';
 import LanguageIcon from '@mui/icons-material/Translate';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 /**
  * Language selector. Changes the locale in the app and persists it in
@@ -90,7 +91,7 @@ export const LocalesMenuButtonClasses = {
 
 const Root = styled(Box, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver(LocalesMenuButtonClasses),
 })(({ theme }) => ({
     [`& .${LocalesMenuButtonClasses.selectedLanguage}`]: {
         marginLeft: theme.spacing(1),

diff --git a/packages/ra-ui-materialui/src/button/SaveButton.tsx b/packages/ra-ui-materialui/src/button/SaveButton.tsx
@@ -19,6 +19,7 @@ import {
 } from 'ra-core';
 
 import { sanitizeButtonRestProps } from './Button';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 /**
  * Submit button for resource forms (Edit and Create).
@@ -179,7 +180,7 @@ const PREFIX = 'RaSaveButton';
 
 const StyledButton = styled(Button, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver({}),
 })(({ theme }) => ({
     position: 'relative',
     [`& .MuiSvgIcon-root, & .MuiIcon-root, & .MuiCircularProgress-root`]: {

diff --git a/packages/ra-ui-materialui/src/button/SkipNavigationButton.tsx b/packages/ra-ui-materialui/src/button/SkipNavigationButton.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { styled } from '@mui/material/styles';
 import { Button } from './Button';
 import { useTranslate } from 'ra-core';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 export const SkipNavigationButton = () => {
     const translate = useTranslate();
@@ -20,7 +21,7 @@ const PREFIX = 'RaSkipNavigationButton';
 
 const StyledButton = styled(Button, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver({}),
 })(({ theme }) => ({
     position: 'fixed',
     padding: theme.spacing(1),

diff --git a/packages/ra-ui-materialui/src/button/SortButton.tsx b/packages/ra-ui-materialui/src/button/SortButton.tsx
@@ -18,6 +18,7 @@ import {
     getFieldLabelTranslationArgs,
     shallowEqual,
 } from 'ra-core';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 /**
  * A button allowing to change the sort field and order.
@@ -156,7 +157,7 @@ export interface SortButtonProps {
 
 const StyledButton = styled(Button, {
     name: 'RaSortButton',
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver({}),
 })({
     '&.MuiButton-sizeSmall': {
         // fix for icon misalignment on small buttons, see https://github.com/mui/material-ui/pull/30240

diff --git a/packages/ra-ui-materialui/src/detail/CreateView.tsx b/packages/ra-ui-materialui/src/detail/CreateView.tsx
@@ -8,6 +8,7 @@ import clsx from 'clsx';
 
 import { CreateProps } from '../types';
 import { Title } from '../layout';
+import { makeOverridesResolver } from './makeOverridesResolver';
 
 export const CreateView = (props: CreateViewProps) => {
     const {
@@ -97,7 +98,7 @@ export const CreateClasses = {
 
 const Root = styled('div', {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver(CreateClasses),
 })(({ theme }) => ({
     [`& .${CreateClasses.main}`]: {
         display: 'flex',

diff --git a/packages/ra-ui-materialui/src/detail/EditView.tsx b/packages/ra-ui-materialui/src/detail/EditView.tsx
@@ -14,6 +14,7 @@ import {
 import { EditActions as DefaultActions } from './EditActions';
 import { Title } from '../layout';
 import { EditProps } from '../types';
+import { makeOverridesResolver } from './makeOverridesResolver';
 
 export const EditView = (props: EditViewProps) => {
     const {
@@ -122,7 +123,7 @@ export const EditClasses = {
 
 const Root = styled('div', {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver(EditClasses),
 })({
     [`& .${EditClasses.main}`]: {
         display: 'flex',

diff --git a/packages/ra-ui-materialui/src/detail/ShowView.tsx b/packages/ra-ui-materialui/src/detail/ShowView.tsx
@@ -8,6 +8,7 @@ import { useShowContext, useResourceDefinition } from 'ra-core';
 import { ShowProps } from '../types';
 import { ShowActions } from './ShowActions';
 import { Title } from '../layout';
+import { makeOverridesResolver } from './makeOverridesResolver';
 
 const defaultActions = <ShowActions />;
 
@@ -89,7 +90,7 @@ export const ShowClasses = {
 
 const Root = styled('div', {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver(ShowClasses),
 })(({ theme }) => ({
     [`& .${ShowClasses.main}`]: {
         display: 'flex',

diff --git a/packages/ra-ui-materialui/src/detail/SimpleShowLayout.tsx b/packages/ra-ui-materialui/src/detail/SimpleShowLayout.tsx
@@ -11,6 +11,7 @@ import {
     OptionalRecordContextProvider,
 } from 'ra-core';
 import { Labeled } from '../Labeled';
+import { makeOverridesResolver } from './makeOverridesResolver';
 
 /**
  * Layout for a Show view showing fields in one column.
@@ -114,7 +115,7 @@ export const SimpleShowLayoutClasses = {
 
 const Root = styled('div', {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver(SimpleShowLayoutClasses),
 })(({ theme }) => ({
     flex: 1,
     padding: `${theme.spacing(1)} ${theme.spacing(2)}`,

diff --git a/packages/ra-ui-materialui/src/detail/TabbedShowLayout.tsx b/packages/ra-ui-materialui/src/detail/TabbedShowLayout.tsx
@@ -23,6 +23,7 @@ import {
     TabbedShowLayoutTabs,
     getShowLayoutTabFullPath,
 } from './TabbedShowLayoutTabs';
+import { makeOverridesResolver } from './makeOverridesResolver';
 
 /**
  * Layout for a Show view showing fields grouped in tabs and laid out in a single column.
@@ -210,7 +211,7 @@ export const TabbedShowLayoutClasses = {
 
 const Root = styled('div', {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver(TabbedShowLayoutClasses),
 })(({ theme }) => ({
     flex: 1,
     [`& .${TabbedShowLayoutClasses.content}`]: {

diff --git a/packages/ra-ui-materialui/src/detail/makeOverridesResolver.tsx b/packages/ra-ui-materialui/src/detail/makeOverridesResolver.tsx
@@ -0,0 +1,8 @@
+export function makeOverridesResolver(classes: { [key: string]: string }) {
+    return (props, styles) => [
+        styles.root,
+        ...Object.entries(classes).map(([name, clazz]) => ({
+            [`& .${clazz}`]: styles[name],
+        })),
+    ];
+}
diff --git a/packages/ra-ui-materialui/src/field/BooleanField.tsx b/packages/ra-ui-materialui/src/field/BooleanField.tsx
@@ -11,6 +11,7 @@ import { useTranslate, useRecordContext } from 'ra-core';
 
 import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
 import { sanitizeFieldRestProps } from './sanitizeFieldRestProps';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 export const BooleanField: FunctionComponent<BooleanFieldProps> = memo(
     props => {
@@ -96,7 +97,7 @@ const PREFIX = 'RaBooleanField';
 
 const StyledTypography = styled(Typography, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver({}),
 })({
     display: 'inline-flex',
     verticalAlign: 'middle',

diff --git a/packages/ra-ui-materialui/src/field/ChipField.tsx b/packages/ra-ui-materialui/src/field/ChipField.tsx
@@ -9,6 +9,7 @@ import { useRecordContext } from 'ra-core';
 
 import { sanitizeFieldRestProps } from './sanitizeFieldRestProps';
 import { PublicFieldProps, InjectedFieldProps, fieldPropTypes } from './types';
+import { makeOverridesResolver } from '../detail/makeOverridesResolver';
 
 export const ChipField: FC<ChipFieldProps> = memo(props => {
     const { className, source, emptyText, ...rest } = props;
@@ -59,7 +60,7 @@ const ChipFieldClasses = {
 
 const StyledChip = styled(Chip, {
     name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
+    overridesResolver: makeOverridesResolver(ChipFieldClasses),
 })({
     [`&.${ChipFieldClasses.chip}`]: { margin: 4, cursor: 'inherit' },
 });