Allow to theme all inputs.

Author: Madeorsk

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

@@ -6,6 +6,11 @@ import FormHelperText from '@mui/material/FormHelperText';
 import FormGroup, { FormGroupProps } from '@mui/material/FormGroup';
 import Switch, { SwitchProps } from '@mui/material/Switch';
 import { FieldTitle, useInput } from 'ra-core';
+import {
+    ComponentsOverrides,
+    styled,
+    useThemeProps,
+} from '@mui/material/styles';
 
 import { CommonInputProps } from './CommonInputProps';
 import { sanitizeInputRestProps } from './sanitizeInputRestProps';
@@ -32,7 +37,10 @@ export const BooleanInput = (props: BooleanInputProps) => {
         options = defaultOptions,
         sx,
         ...rest
-    } = props;
+    } = useThemeProps({
+        props: props,
+        name: PREFIX,
+    });
     const {
         id,
         field,
@@ -65,7 +73,7 @@ export const BooleanInput = (props: BooleanInputProps) => {
     const renderHelperText = helperText !== false || invalid;
 
     return (
-        <FormGroup
+        <StyledFormGroup
             className={clsx('ra-input', `ra-input-${source}`, className)}
             row={row}
             sx={sx}
@@ -102,7 +110,7 @@ export const BooleanInput = (props: BooleanInputProps) => {
                     />
                 </FormHelperText>
             ) : null}
-        </FormGroup>
+        </StyledFormGroup>
     );
 };
 
@@ -113,3 +121,29 @@ export type BooleanInputProps = CommonInputProps &
     };
 
 const defaultOptions = {};
+
+const PREFIX = 'RaBooleanInput';
+
+const StyledFormGroup = styled(FormGroup, {
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})({});
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [PREFIX]: 'root';
+    }
+
+    interface ComponentsPropsList {
+        [PREFIX]: Partial<BooleanInputProps>;
+    }
+
+    interface Components {
+        [PREFIX]?: {
+            defaultProps?: ComponentsPropsList[typeof PREFIX];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >[typeof PREFIX];
+        };
+    }
+}

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

@@ -8,12 +8,22 @@ import {
     useChoicesContext,
     useInput,
 } from 'ra-core';
+import {
+    ComponentsOverrides,
+    styled,
+    useThemeProps,
+} from '@mui/material/styles';
+
 import { CommonInputProps } from './CommonInputProps';
 import { InputHelperText } from './InputHelperText';
 import { SupportCreateSuggestionOptions } from './useSupportCreateSuggestion';
-import { Datagrid, DatagridProps } from '../list/datagrid';
-import { FilterButton, FilterForm } from '../list/filter';
-import { FilterContext } from '../list/FilterContext';
+import {
+    Datagrid,
+    DatagridProps,
+    FilterButton,
+    FilterForm,
+    FilterContext,
+} from '../list';
 import { Pagination as DefaultPagination } from '../list/pagination';
 
 const defaultPagination = <DefaultPagination />;
@@ -49,7 +59,12 @@ const defaultPagination = <DefaultPagination />;
  *    </Edit>
  * );
  */
-export const DatagridInput = (props: DatagridInputProps) => {
+export const DatagridInput = (inProps: DatagridInputProps) => {
+    const props = useThemeProps({
+        props: inProps,
+        name: PREFIX,
+    });
+
     const {
         choices,
         className,
@@ -121,7 +136,7 @@ export const DatagridInput = (props: DatagridInputProps) => {
         ]
     );
     return (
-        <div className={clsx('ra-input', `ra-input-${source}`, className)}>
+        <Root className={clsx('ra-input', `ra-input-${source}`, className)}>
             {/* @ts-ignore FIXME cannot find another way to fix this error: "Types of property 'isPending' are incompatible: Type 'boolean' is not assignable to type 'false'." */}
             <ListContextProvider value={listContext}>
                 {filters ? (
@@ -153,7 +168,7 @@ export const DatagridInput = (props: DatagridInputProps) => {
                     error={fieldState.error?.message || fetchError?.message}
                 />
             </ListContextProvider>
-        </div>
+        </Root>
     );
 };
 
@@ -169,3 +184,29 @@ export type DatagridInputProps = Omit<
         filters?: ReactElement | ReactElement[];
         pagination?: ReactElement | false;
     };
+
+const PREFIX = 'RaDatagridInput';
+
+const Root = styled('div', {
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})({});
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [PREFIX]: 'root';
+    }
+
+    interface ComponentsPropsList {
+        [PREFIX]: Partial<DatagridInputProps>;
+    }
+
+    interface Components {
+        [PREFIX]?: {
+            defaultProps?: ComponentsPropsList[typeof PREFIX];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >[typeof PREFIX];
+        };
+    }
+}

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

@@ -2,6 +2,11 @@ import * as React from 'react';
 import clsx from 'clsx';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
 import { useInput, FieldTitle, useEvent } from 'ra-core';
+import {
+    ComponentsOverrides,
+    styled,
+    useThemeProps,
+} from '@mui/material/styles';
 
 import { CommonInputProps } from './CommonInputProps';
 import { sanitizeInputRestProps } from './sanitizeInputRestProps';
@@ -46,23 +51,28 @@ import { useForkRef } from '@mui/material';
  * to convert the form value (which is always a date string) back to a Date object.
  * <DateInput source="published_at" parse={val => new Date(val)} />
  */
-export const DateInput = ({
-    className,
-    defaultValue,
-    format = defaultFormat,
-    label,
-    source,
-    resource,
-    helperText,
-    margin,
-    onChange,
-    onFocus,
-    validate,
-    variant,
-    disabled,
-    readOnly,
-    ...rest
-}: DateInputProps) => {
+export const DateInput = (props: DateInputProps) => {
+    const {
+        className,
+        defaultValue,
+        format = defaultFormat,
+        label,
+        source,
+        resource,
+        helperText,
+        margin,
+        onChange,
+        onFocus,
+        validate,
+        variant,
+        disabled,
+        readOnly,
+        ...rest
+    } = useThemeProps({
+        props: props,
+        name: PREFIX,
+    });
+
     const { field, fieldState, id, isRequired } = useInput({
         defaultValue,
         resource,
@@ -179,7 +189,7 @@ export const DateInput = ({
     const inputRef = useForkRef(ref, localInputRef);
 
     return (
-        <TextField
+        <StyledTextField
             id={id}
             name={name}
             inputRef={inputRef}
@@ -292,3 +302,29 @@ const defaultFormat = (value: string | Date | number) => {
     // other values (e.g., localized date strings, timestamps) need to be converted to Dates first
     return convertDateToString(new Date(value));
 };
+
+const PREFIX = 'RaDateInput';
+
+const StyledTextField = styled(TextField, {
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})({});
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [PREFIX]: 'root';
+    }
+
+    interface ComponentsPropsList {
+        [PREFIX]: Partial<DateInputProps>;
+    }
+
+    interface Components {
+        [PREFIX]?: {
+            defaultProps?: ComponentsPropsList[typeof PREFIX];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >[typeof PREFIX];
+        };
+    }
+}

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

@@ -2,6 +2,11 @@ import * as React from 'react';
 import clsx from 'clsx';
 import TextField, { TextFieldProps } from '@mui/material/TextField';
 import { useInput, FieldTitle } from 'ra-core';
+import {
+    ComponentsOverrides,
+    styled,
+    useThemeProps,
+} from '@mui/material/styles';
 
 import { CommonInputProps } from './CommonInputProps';
 import { sanitizeInputRestProps } from './sanitizeInputRestProps';
@@ -11,24 +16,29 @@ import { useForkRef } from '@mui/material';
 /**
  * Input component for entering a date and a time with timezone, using the browser locale
  */
-export const DateTimeInput = ({
-    className,
-    defaultValue,
-    format = formatDateTime,
-    label,
-    helperText,
-    margin,
-    onBlur,
-    onChange,
-    onFocus,
-    source,
-    resource,
-    validate,
-    variant,
-    disabled,
-    readOnly,
-    ...rest
-}: DateTimeInputProps) => {
+export const DateTimeInput = (props: DateTimeInputProps) => {
+    const {
+        className,
+        defaultValue,
+        format = formatDateTime,
+        label,
+        helperText,
+        margin,
+        onBlur,
+        onChange,
+        onFocus,
+        source,
+        resource,
+        validate,
+        variant,
+        disabled,
+        readOnly,
+        ...rest
+    } = useThemeProps({
+        props: props,
+        name: PREFIX,
+    });
+
     const { field, fieldState, id, isRequired } = useInput({
         defaultValue,
         onBlur,
@@ -138,7 +148,7 @@ export const DateTimeInput = ({
     const inputRef = useForkRef(ref, localInputRef);
 
     return (
-        <TextField
+        <StyledTextField
             id={id}
             inputRef={inputRef}
             name={name}
@@ -230,3 +240,29 @@ const formatDateTime = (value: string | Date) => {
 
     return convertDateToString(new Date(value));
 };
+
+const PREFIX = 'RaDateTimeInput';
+
+const StyledTextField = styled(TextField, {
+    name: PREFIX,
+    overridesResolver: (props, styles) => styles.root,
+})({});
+
+declare module '@mui/material/styles' {
+    interface ComponentNameToClassKey {
+        [PREFIX]: 'root';
+    }
+
+    interface ComponentsPropsList {
+        [PREFIX]: Partial<DateTimeInputProps>;
+    }
+
+    interface Components {
+        [PREFIX]?: {
+            defaultProps?: ComponentsPropsList[typeof PREFIX];
+            styleOverrides?: ComponentsOverrides<
+                Omit<Theme, 'components'>
+            >[typeof PREFIX];
+        };
+    }
+}