如何在反应管理员中更改文本输入的变体答案

【问题标题】：How to change variant of text input in react admin如何在反应管理员中更改文本输入的变体
【发布时间】：2019-12-27 12:53:06
【问题描述】：

我想使用材质 UI 更改 TextInput 的变体。默认变体是标准变体，我想将其更改为概述，但无法这样做。关注material-ui的文档Material-ui documentation

下面是我的代码sn-p

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

            </FormTab>
     </TabbedForm>

【问题讨论】：

应该是<TextField/> Material UI中没有TextInput 这样的组件

标签： reactjs material-ui react-admin

【解决方案1】：

您需要将 variant="standard" 传递给 react-admin <TextInput> 组件。问题是<Filter> 和<Create> 页面等会自动传入一堆props，比如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)

【讨论】：

【解决方案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

【讨论】：

【解决方案3】：

React-admin 已修复此问题。

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

例如：SimpleForm、Create、Filter 等。

The Git resolution

【讨论】：