React material-ui TextField，输入为白色

Question

我已经开始使用material-ui，但是所有Textfield都有问题，当我从web复制并粘贴示例时，它们的渲染效果不佳

我已安装：

yarn add @material-ui/core
yarn add fontsource-roboto
yarn add @material-ui/icons
yarn add @material-ui/lab
yarn add @material-ui/pickers
yarn add @date-io/date-fns@1.x date-fns
yarn add @material/react-text-field

由于输入颜色为白色，因此未显示“必填*”和“日期选择器对话框”

[

例如，对于以下输入（纯文本字段），代码为：

import TextField from '@material-ui/core/TextField';
import { createStyles, makeStyles, Theme } from '@material-ui/core/styles';
<TextField required id="standard-required" label="Required" defaultValue="Hello World" />

在控制台上没有错误，但是样式不好。组件性能好

Answer 1

问题是我没有指定输入类型（type =“ input”）。对于文本字段对象：

<div style={{'marginTop':'20px'}} >
                <TextField
                style={{'width':'50%'}}
                id="outlined-password-input"
                label="Name"
                type="input" ----> this!!!!!!!!!!!
                autoComplete="current-password"
                variant="outlined"
              />

对于自动完成对象：

<Autocomplete
  multiple
  id="checkboxes-tags-demo"
  options={this.top100Films}
  disableCloseOnSelect
  getOptionLabel={(option) => option.title}
  renderOption={(option, { selected }) => (
    <React.Fragment>
      <Checkbox
        icon={icon}
        checkedIcon={checkedIcon}
        style={{ marginRight: 8 }}
        checked={selected}
      />
      {option.title}
    </React.Fragment>
  )}

  style={{ width: "80%" }}
  renderInput={(params) => (
    <TextField {...params} 
    variant="outlined" 
    type="input"   -----> this !!!!!
    label="Recipients" 
    placeholder="Contacts" />
  )}
/>

对于KeyboardDatePicker对象：

<MuiPickersUtilsProvider utils={DateFnsUtils}>
<Grid container justify="space-around">
    <KeyboardDatePicker
      margin="normal"
      id="date-picker-dialog"
      label="Date picker dialog"
      type="input" ------> this !!!!!!
      format="MM/dd/yyyy"
      value={this.state.selectedDate}
      onChange={this.handleDateChange}
      KeyboardButtonProps={{
        'aria-label': 'change date',
      }}
    minDateMessage='La fecha debe ser posterior'
    maxDateMessage='Fecha demasiado lejana'
    error={this.state.error}
    helperText={this.state.error ? this.errorText : null}
    minDate={this.state.minDate}
    />
</Grid>
</MuiPickersUtilsProvider>