Я установил material-ui-chip-input для использования тегов в одном из моих полей ввода. Мне нужна была метка с ним, поэтому я использовал метку по умолчанию для пользовательского интерфейса материала, которую они используют для других входов. Но ввод должен быть уменьшен, когда пользователь нажимает на него.

Прилагаю ниже свой код и снимок экрана с дизайном. Пожалуйста, не стесняйтесь помочь. Заранее спасибо!

enter image description here

<div className={`${styles.input_range} form_design`}>
    <label className={styles.character_limit}>(13/30)</label>
    <label class="MuiFormLabel-root MuiInputLabel-root MuiInputLabel-formControl MuiInputLabel-animated" data-shrink="false" for="standard-basic" id="standard-basic-label">Title</label>
    <ChipInput
    defaultValue={['Science', 'Arts']}
    // onChange={(chips) => handleChange(chips)}
    />
</div>
0
nazifa rashid 10 Фев 2021 в 11:32

1 ответ

Лучший ответ

Удалите свой собственный label и добавьте в ChipInput свойство label="Title", и вы получите желаемый результат.

Для второго label я добавил свойство helperText. Я добавил className в компонент, а затем внесу некоторые изменения с помощью CSS.

<div className={`${styles.input_range} form_design`}>
    <ChipInput
    className="customChipInput"
    label="Title"
    helperText="(13/30)"
    defaultValue={['Science', 'Arts']}
    // onChange={(chips) => handleChange(chips)}
    />
</div>

В CSS вы можете добавить ниже

.customChipInput p {
  width: fit-content;
  position: absolute;
  bottom: 30px;
  right: 0;
}

Вы можете проверить мой фрагмент здесь

Дополнительную информацию о свойствах компонента можно найти здесь

enter image description here

1
gionic 10 Фев 2021 в 11:08