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

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

22.06.2021

Ответы:

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

фон: '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

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

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 и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

ИИ в аэрокосмической отрасли

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

Метки

Machine Learning JavaScript Data Science Artificial Intelligence Software Development Python Web Development Coding Deep Learning AI React Software Engineering Nodejs Java Front End Development Typescript Computer Science Data Algorithms Development NLP Tech Programming Languages CSS ChatGPT HTML Python Programming Javascript Tips Angular Computer Vision Data Visualization Neural Networks Startup Tutorial Statistics Productivity Reactjs Learning