Как мне оформить React Material-UI Обязательный TextField - PullRequest
Новая
       4

Как мне оформить React Material-UI Обязательный TextField

0 голосов
/ 25 апреля 2019

В документации говорится, что вы можете добавить пользовательский CSS в TextField.

Например, второе TextField становится фиолетовым при нажатии на него: 

  <TextField
    className={classes.margin}
    InputLabelProps={{
      classes: {
        root: classes.cssLabel,
        focused: classes.cssFocused,
      },
    }}
    InputProps={{
      classes: {
        root: classes.cssOutlinedInput,
        focused: classes.cssFocused,
        notchedOutline: classes.notchedOutline,
      },
    }}
    label="Custom CSS"
    variant="outlined"
    id="custom-css-outlined-input"
  />

Каксделать так, чтобы мои обязательные TextFields постоянно выделялись (до того, как они были сфокусированы), как и поля TextField для ошибок?

Я могу сделать звездочку оранжевой, но не могу показатьсячтобы изменить цвет линии: 

const styles = theme => ({
  labelAsterisk: {
    color: "orange"
  }
});

    <TextField
      id="name"
      label="Name"
      required
      InputLabelProps={{
        FormLabelClasses: {
          asterisk: classes.labelAsterisk
        }
      }}
      margin="normal"
    />

РЕДАКТИРОВАТЬ: я могу изменить цвет, если я использую обведенный TextField.Однако я хочу сделать это для обычного TextField. 

const styles = theme => ({
  greenOutline: {
    borderColor: "green !important"
  }
});

    <TextField
      id="custom-css-outlined-input"
      label="Custom CSS"
      variant="outlined"
      InputProps={{
        classes: {
          notchedOutline: classes.greenOutline
        }
      }}
    />

1 Ответ

0 голосов
/ 25 апреля 2019

См. https://codesandbox.io/s/5yyo503794 для рабочего примера.

Ключевые части были:

Класс underline в InputProps

      InputProps={{
        classes: {
          underline: classes.cssRequired
        }
      }}

И класс &:before и стиль borderBottom в связанном css 

  cssRequired: {
    "&:before": {
      borderBottom: "2px solid orange"
    }
  },

Большой фрагмент: 

const styles = theme => ({
  labelAsterisk: {
    color: "red"
  },
  cssLabel: {
    color: "orange"
  },
  cssRequired: {
    "&:before": {
      borderBottom: "2px solid orange"
    }
  },
});


    <TextField
      id="requiredField"
      label="Required Field"
      value="Custom Text"
      required
      InputLabelProps={{
        classes: {
          root: classes.cssLabel
        },
        FormLabelClasses: {
          asterisk: classes.labelAsterisk
        }
      }}
      InputProps={{
        classes: {
          underline: classes.cssRequired
        }
      }}
      margin="normal"
    />
...