Question

我想使用材质UI更改TextInput的变体。默认变体为“标准”，我想将其更改为轮廓，但不能这样做。有关Material-ui Material-ui documentation

的后续文档

下面是我的代码段

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

            </FormTab>
     </TabbedForm>

Answer 1

您需要将variant="standard"传递给react-admin <TextInput>组件。问题是<Filter>和<Create>页面等会自动传递一堆道具，例如record和basePath，出于某些原因，其中包括variant: undefined。因此，如果您只写<TextInput variant="standard" ... />，则道具将被覆盖。然后，当TextInput component将其道具传递给ResettableTextField component时，现在未定义的变体道具将默认设置为“已填充” ...

因此，您只需要提取TextInput组件，以使您的变体道具以道具顺序排在最后：

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

我个人已将所有内容抽象到HOC中，因为这是所有使用TextFields的输入所要做的：

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)

Answer 2

检查我的代码

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

            </FormTab>
     </TabbedForm>

检查我的fork

Answer 3

反应管理员已修复此问题。

您现在可以在包含输入的组件上使用variant="outlined | standard | filled"道具。

例如：SimpleForm，创建，过滤等

The Git resolution

如何在React Admin中更改文本输入的变体

3 个答案: