Customizable select field and improve stories to test it.

Author: Madeorsk

packages/ra-ui-materialui/src/field/SelectField.stories.tsx

@@ -35,70 +35,77 @@ const genderChoices = [
 ];
 
 export const Basic = () => (
-    <RecordContextProvider value={record}>
+    <Wrapper record={record}>
         <SelectField source="gender" choices={genderChoices} />
-    </RecordContextProvider>
+    </Wrapper>
 );
 
 const languages = [
     { id: 'am', name: 'Amharic', nativeName: 'አማርኛ' },
     { id: 'ar', name: 'Arabic', nativeName: 'العربية' },
 ];
 export const OptionText = () => (
-    <RecordContextProvider value={record}>
+    <Wrapper record={record}>
         <SelectField
             source="language"
             choices={languages}
             optionText="nativeName"
         />
-    </RecordContextProvider>
+    </Wrapper>
 );
 
 const countries = [{ name: 'Arabic', code: 'ar' }];
 export const OptionValue = () => (
-    <RecordContextProvider value={record}>
+    <Wrapper record={record}>
         <SelectField source="language" choices={countries} optionValue="code" />
-    </RecordContextProvider>
+    </Wrapper>
 );
 
 const optionRenderer = choice => `${choice.first_name} ${choice.last_name}`;
 const authors = [{ id: 1, first_name: 'John', last_name: 'Doe' }];
 export const OptionTextFunction = () => (
-    <RecordContextProvider value={{ id: 1 }}>
+    <Wrapper record={{ id: 1 }}>
         <SelectField
             source="id"
             choices={authors}
             optionText={optionRenderer}
         />
-    </RecordContextProvider>
+    </Wrapper>
 );
 
 const translateChoice = [
     { id: 'no results', name: 'ra.navigation.no_results' },
 ];
 export const TranslateChoice = () => (
-    <AdminContext i18nProvider={i18nProvider}>
-        <RecordContextProvider value={record}>
-            <Labeled
-                label="translateChoice={true}"
-                sx={{ border: '1px solid', margin: '1rem', padding: '1rem' }}
-            >
-                <SelectField
-                    source="data"
-                    choices={translateChoice}
-                    // translateChoice={true} is set by default
-                />
-            </Labeled>
-            <Labeled
-                label="translateChoice={false}"
-                sx={{ border: '1px solid', margin: '1rem', padding: '1rem' }}
-            >
-                <SelectField
-                    source="data"
-                    choices={translateChoice}
-                    translateChoice={false}
-                />
-            </Labeled>
-        </RecordContextProvider>
+    <Wrapper record={record}>
+        <Labeled
+            label="translateChoice={true}"
+            sx={{ border: '1px solid', margin: '1rem', padding: '1rem' }}
+        >
+            <SelectField
+                source="data"
+                choices={translateChoice}
+                // translateChoice={true} is set by default
+            />
+        </Labeled>
+        <Labeled
+            label="translateChoice={false}"
+            sx={{ border: '1px solid', margin: '1rem', padding: '1rem' }}
+        >
+            <SelectField
+                source="data"
+                choices={translateChoice}
+                translateChoice={false}
+            />
+        </Labeled>
+    </Wrapper>
+);
+
+const Wrapper = ({ children, record, defaultTheme = 'light' }) => (
+    <AdminContext
+        i18nProvider={i18nProvider}
+        defaultTheme={defaultTheme as any}
+    >
+        <RecordContextProvider value={record}>{children}</RecordContextProvider>
     </AdminContext>
 );

packages/ra-ui-materialui/src/field/SelectField.tsx

@@ -1,6 +1,11 @@
 import * as React from 'react';
 import { ChoicesProps, useChoices, useFieldValue, useTranslate } from 'ra-core';
 import { Typography, TypographyProps } from '@mui/material';
+import {
+    ComponentsOverrides,
+    styled,
+    useThemeProps,
+} from '@mui/material/styles';
 
 import { sanitizeFieldRestProps } from './sanitizeFieldRestProps';
 import { FieldProps } from './types';
@@ -71,8 +76,13 @@ import { genericMemo } from './genericMemo';
 const SelectFieldImpl = <
     RecordType extends Record<string, any> = Record<string, any>,
 >(
-    props: SelectFieldProps<RecordType>
+    inProps: SelectFieldProps<RecordType>
 ) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
+
     const {
         className,
         emptyText,
@@ -111,14 +121,14 @@ const SelectFieldImpl = <
     const choiceText = getChoiceText(choice);
 
     return (
-        <Typography
+        <StyledTypography
             component="span"
             variant="body2"
             className={className}
             {...sanitizeFieldRestProps(rest)}
         >
             {choiceText}
-        </Typography>
+        </StyledTypography>
     );
 };
 
@@ -131,3 +141,29 @@ export interface SelectFieldProps<
 > extends ChoicesProps,
         FieldProps<RecordType>,
         Omit<TypographyProps, 'textAlign'> {}
+
+const PREFIX = 'RaSelectField';
+
+const StyledTypography = styled(Typography, {
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})({});
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [PREFIX]: 'root';
+    }
+
+    interface ComponentsPropsList {
+        [PREFIX]: Partial<SelectFieldProps>;
+    }
+
+    interface Components {
+        [PREFIX]?: {
+            defaultProps?: ComponentsPropsList[typeof PREFIX];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >[typeof PREFIX];
+        };
+    }
+}