Comment changer la variante de la saisie de texte dans React Admin

Vérifier mon code

 <TabbedForm>
            <FormTab label="INFO">
                {/* <TextInput disabled label="" source="id" type="hidden"/> */}
                <TextField label="Name" source="name"  variant="outlined"/>
                <TextField source="shortdesc" />

            </FormTab>
     </TabbedForm>

vérifier mon fork a>

Vous devez transmettre variant = "standard" au composant react-admin . Le problème est que les pages et , etc., transmettent automatiquement un tas d'accessoires, comme record et basePath, qui inclut la variante : undefined pour une raison quelconque. Donc, si vous écrivez simplement , votre accessoire sera écrasé. Et puis quand le Le composant TextInput transmet ses accessoires à Composant ResettableTextField , la variante désormais non définie est définie par défaut sur "rempli" ...

Il vous suffit donc d'extraire le composant TextInput, de sorte que votre variante de prop soit la dernière dans l'ordre des accessoires:

import React from 'react'
import {
  TextInput as RaTextInput,
  NumberInput as RaNumberInput,
  SelectInput as RaSelectInput,
  DateInput as RaDateInput,
  DateTimeInput as RaDateTimeInput,
  NullableBooleanInput as RaNullableBooleanInput,
  AutocompleteInput as RaAutocompleteInput,
} from 'react-admin'

const standardize = Component => props => <Component {...props} variant="standard" />

export const TextInput = standardize(RaTextInput)
export const NumberInput = standardize(RaNumberInput)
export const SelectInput = standardize(RaSelectInput)
export const DateInput = standardize(RaDateInput)
export const DateTimeInput = standardize(RaDateTimeInput)
export const NullableBooleanInput = standardize(RaNullableBooleanInput)
export const AutocompleteInput = standardize(RaAutocompleteInput)

Personnellement, j'ai résumé tout cela dans un HOC, car c'est ce que vous devez faire pour toutes les entrées qui utilisent TextFields:

export const TextInput = props => <RaTextInput {...props} variant="standard" />

React-admin a corrigé ce problème.

Vous pouvez maintenant utiliser l'accessoire variant = "lined | standard | filled " sur le composant contenant l'entrée.

Ex: SimpleForm, Create, Filter, etc.

La résolution Git