Блог

Главная - Вопросы по программированию - React material-текстовое поле пользовательского интерфейса, ввод белого цвета

React material-текстовое поле пользовательского интерфейса, ввод белого цвета

#reactjs #material-ui

#reactjs #материал-пользовательский интерфейс

Вопрос:

Я начал использовать material-ui, но у меня проблемы со всеми текстовыми полями, они плохо отображаются, когда я копирую и вставляю примеры из Интернета

Я установил:

 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

«Требуется *» и «Диалоговое окно выбора даты» не отображаются, поскольку цвет ввода белый

[нет содержимого][2]

с содержимым

Например, для ввода ниже (чистое текстовое поле) код:

 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" />

На консоли ошибок нет, но стиль не очень хорош. Производительность компонента хорошая

Комментарии:

1. это не ошибка. вы просто не знаете или не пробовали, как изменить стиль поля ввода. Я бы настоятельно рекомендовал потратить некоторое время на react docs reactjs.org/docs/getting-started.html и немного css.

2. это еще одно хорошее место для начала — developer.mozilla.org/en-US/docs/Learn/Front-end_web_developer в нем есть приятное и простое введение в стиль и CSS.

3. Спасибо! Проблема не в указании типа ввода. Я не понял ошибку, потому что я копирую и вставляю код из Интернета, где он работает правильно. Но я все еще не понимаю, почему код работает в codesandbox, но не на моей машине.

4. вот в чем дело. быстро ознакомьтесь с некоторыми основами CSS, и вы узнаете, что происходит и почему. кроме того, в долгосрочной перспективе это поможет вам задавать качественные вопросы, а значит, мы сможем помочь вам намного быстрее.

5. Спасибо, Джей. Когда я начинаю, мне трудно понять некоторые различия между кодом, который работает на вашем сайте, но не на моем компьютере. Как, например, KeyboardDatePicker, на моей машине он рисует границу для фокусировки на значке для отображения календаря и на номерах календаря. Я собираюсь продолжать исследовать и читать, но это сложно, потому что я не могу найти никакой информации. Спасибо за подсказку.

Ответ №1:

Проблема в том, что я не указал тип ввода (type=»input»). Для объекта textfield:

 <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>