Use theme to set input variant

Author: fzaninotto

examples/demo/src/layout/themes.ts

@@ -1,4 +1,11 @@
-export const darkTheme = {
+import { ThemeOptions } from '@mui/material';
+
+type RaTheme = {
+    sidebar: { width: number };
+    components: { RaMenuItemLink: { styleOverrides: any } };
+};
+
+export const darkTheme: ThemeOptions & RaTheme = {
     palette: {
         primary: {
             main: '#90caf9',
@@ -56,10 +63,17 @@ export const darkTheme = {
                 },
             },
         },
+        MuiTextField: {
+            defaultProps: {
+                variant: 'filled',
+                margin: 'dense',
+                size: 'small',
+            },
+        },
     },
 };
 
-export const lightTheme = {
+export const lightTheme: ThemeOptions & RaTheme = {
     palette: {
         primary: {
             main: '#4f3cc9',
@@ -164,5 +178,12 @@ export const lightTheme = {
                 },
             },
         },
+        MuiTextField: {
+            defaultProps: {
+                variant: 'filled',
+                margin: 'dense',
+                size: 'small',
+            },
+        },
     },
 };

packages/ra-ui-materialui/src/defaultTheme.ts

@@ -75,6 +75,13 @@ export const defaultTheme = {
                 },
             },
         },
+        MuiTextField: {
+            defaultProps: {
+                variant: 'filled',
+                margin: 'dense',
+                size: 'small',
+            },
+        },
     },
 };
 

packages/ra-ui-materialui/src/input/AutocompleteInput.tsx

@@ -143,7 +143,7 @@ export const AutocompleteInput = <
         label,
         limitChoicesToValue,
         matchSuggestion,
-        margin = 'dense',
+        margin,
         fieldState: fieldStateOverride,
         filterToQuery = DefaultFilterToQuery,
         formState: formStateOverride,
@@ -159,13 +159,13 @@ export const AutocompleteInput = <
         resource: resourceProp,
         shouldRenderSuggestions,
         setFilter,
-        size = 'small',
+        size,
         source: sourceProp,
         suggestionLimit,
         TextFieldProps,
         translateChoice,
         validate,
-        variant = 'filled',
+        variant,
         ...rest
     } = props;
 

packages/ra-ui-materialui/src/input/DateInput.tsx

@@ -39,12 +39,12 @@ export const DateInput = ({
     source,
     resource,
     helperText,
-    margin = 'dense',
+    margin,
     onBlur,
     onChange,
     parse,
     validate,
-    variant = 'filled',
+    variant,
     ...rest
 }: DateInputProps) => {
     const { field, fieldState, formState, id, isRequired } = useInput({

packages/ra-ui-materialui/src/input/DateTimeInput.tsx

@@ -26,14 +26,14 @@ export const DateTimeInput = ({
     format = formatDateTime,
     label,
     helperText,
-    margin = 'dense',
+    margin,
     onBlur,
     onChange,
     source,
     resource,
     parse = parseDateTime,
     validate,
-    variant = 'filled',
+    variant,
     ...rest
 }: DateTimeInputProps) => {
     const { field, fieldState, formState, id, isRequired } = useInput({

packages/ra-ui-materialui/src/input/NullableBooleanInput.tsx

@@ -16,14 +16,14 @@ export const NullableBooleanInput = (props: NullableBooleanInputProps) => {
         format = getStringFromBoolean,
         helperText,
         label,
-        margin = 'dense',
+        margin,
         onBlur,
         onChange,
         parse = getBooleanFromString,
         resource,
         source,
         validate,
-        variant = 'filled',
+        variant,
         nullLabel = 'ra.boolean.null',
         falseLabel = 'ra.boolean.false',
         trueLabel = 'ra.boolean.true',

packages/ra-ui-materialui/src/input/NumberInput.tsx

@@ -26,7 +26,7 @@ export const NumberInput = ({
     format = convertNumberToString,
     helperText,
     label,
-    margin = 'dense',
+    margin,
     onBlur,
     onChange,
     parse = convertStringToNumber,
@@ -36,7 +36,7 @@ export const NumberInput = ({
     min,
     max,
     validate,
-    variant = 'filled',
+    variant,
     inputProps: overrideInputProps,
     ...rest
 }: NumberInputProps) => {

packages/ra-ui-materialui/src/input/ResettableTextField.tsx

@@ -23,8 +23,8 @@ export const ResettableTextField = forwardRef(
             value,
             resettable,
             disabled,
-            variant = 'filled',
-            margin = 'dense',
+            variant,
+            margin,
             className,
             ...rest
         } = props;

packages/ra-ui-materialui/src/input/SelectArrayInput.tsx

@@ -95,7 +95,7 @@ export const SelectArrayInput = (props: SelectArrayInputProps) => {
         label,
         isFetching: isFetchingProp,
         isLoading: isLoadingProp,
-        margin = 'dense',
+        margin,
         onBlur,
         onChange,
         onCreate,
@@ -106,7 +106,7 @@ export const SelectArrayInput = (props: SelectArrayInputProps) => {
         source: sourceProp,
         translateChoice,
         validate,
-        variant = 'filled',
+        variant,
         ...rest
     } = props;
 

packages/ra-ui-materialui/src/list/filter/FilterLiveSearch.tsx

@@ -28,7 +28,7 @@ export const FilterLiveSearch = memo(
         sx?: SxProps;
         variant?: 'filled' | 'outlined';
     }) => {
-        const { source = 'q', variant = 'filled', ...rest } = props;
+        const { source = 'q', variant, ...rest } = props;
         const { filterValues, setFilters } = useListFilterContext();
         const translate = useTranslate();