WedX - журнал о программировании и компьютерных науках

React js material-ui textfield endAdornment background

Я выполнил приведенные здесь инструкции: https://stackoverflow.com/a/61708197/8024296

Но код примера, похоже, больше не работает.

Как я могу это сделать, но без этого поля справа - это то, что оно следует за закругленным трендом поля ввода.

введите описание изображения здесь

Я пробовал следующее, но похоже, что это не работает:

<TextField
          label="Name File"
          id="outlined-start-adornment"
          className={clsx(classes.margin, classes.textField)}
          InputProps={{
            endAdornment: <InputAdornment position="end">.docx</InputAdornment>,
            classes: {
              adornedEnd: classes.adornedEnd
            }
          }}
          variant="outlined"
        />

введите описание изображения здесь

Ссылка: codeandbox

Можешь дать мне руку?


Ответы:


1

Ваш код работает так, как ожидалось, чтобы достичь желаемого стиля, я предлагаю добавить эту строку кода:

фон: 'linear-gradient (-90deg, #CCC 30%, #FFF 30%)'

вместо backgroundColor: #ccc.

Удачного кодирования!

22.06.2021
  • Код вроде работает, но если я уберу это, возникнет проблема: className = {clsx (classes.margin, classes.textField)} Мне нужно, чтобы все поля были fullWidth и одинакового размера, я получаю это в процессе производства: i.stack.imgur.com/eZhwd.png Похожую вещь также можно увидеть здесь: codeandbox.io/s/material-demo-forked-iwrs5?file=/demo.js 22.06.2021
  • Итак, вы хотите, чтобы все поля имели этот серый блок? 22.06.2021
  • Я попытался воссоздать проблему с песочницей кода, которую вы указали, но не смог. 22.06.2021
  • Есть песочница кода https://codesandbox.io/s/material-demo-forked-drh08?file=/demo.js:2595-2597 22.06.2021

  • 2

    вы были так близки, просто добавьте свой код, чтобы он был таким

    adornedEnd: {
        backgroundColor: "#ccc",
        height: "2.4rem",
        maxHeight: "3rem",
      } 
    

    И измените InputProps следующим образом:

    InputProps={{endAdornment: <InputAdornment className={clsx(classes.adornedEnd)} position="end">.docx</InputAdornment>,
    style: {
       paddingRight: "0"
    }}}
    

    это решит проблему. Рабочий пример на codepen.io рабочий пример на codeandbox.io

    (будьте осторожны, вы можете его отредактировать)

    22.06.2021
    Новые материалы

    Как проанализировать работу вашего классификатора?
    Не всегда просто знать, какие показатели использовать С развитием глубокого обучения все больше и больше людей учатся обучать свой первый классификатор. Но как только вы закончите..

    Работа с цепями Маркова, часть 4 (Машинное обучение)
    Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

    Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
    Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

    Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
    Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

    Учебные заметки: создание моего первого пакета Node.js
    Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

    Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
    Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

    ИИ в аэрокосмической отрасли
    Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


    Для любых предложений по сайту: [email protected]