Как добавить заполнитель в компонент MUI Select, созданный TextField?
Я хочу добавить заполнитель (-- Select --) к следующему компоненту MUI Select, созданному TextField с помощью select prop.
const [country, setCountry] = useState("")
<TextField
select
value = {country}
onChange = {e => setCountry(e.target.value)}
>
<MenuItem value='US'>America</MenuItem>
<MenuItem value='CA'>Canada</MenuItem>
<MenuItem value='UK'>England</MenuItem>
</TextField>
Я попытался добавить реквизит placeholder='-- Select --', но заполнитель не отображается.
Потом я попробовал добавить label='-- Select --' реквизит. Хотя заполнитель может отображаться, когда компонент изначально визуализировался и я пытался выбрать параметр, метка переместилась в верхний левый угол компонента, мне не нужна такая анимация. Затем я попытался добавить InputLabelProps = {{disableAnimation: true}} реквизит, но анимация все равно существовала.
Может ли кто-нибудь научить меня, как добавить заполнитель в моем случае?
Ответы 1
Если мы проверим элемент Select, внутри span будет пустой div с классом .MuiSelect-select, который виден, когда значение не выбрано.
Мы можем создать обходное решение, используя это span, вот так:
const [country, setCountry] = useState('');
return (
<TextField
sx = {{
width: '300px',
'& .MuiSelect-select span::before': {
content: "'-- Select --'",
},
}}
select
value = {country}
onChange = {(e) => setCountry(e.target.value)}
>
<MenuItem value = "US">America</MenuItem>
<MenuItem value = "CA">Canada</MenuItem>
<MenuItem value = "UK">England</MenuItem>
</TextField>
);
Вы можете взглянуть на этот StackBlitz, чтобы увидеть живой рабочий пример этого обходного решения.
Свойство содержимого css требует, чтобы строки были заключены в кавычки, а свойство MUI sx является объектом, поэтому мы должны заключить строку в другую кавычку, чтобы обеспечить правильный анализ строки. Этот ТАК ответ подробно объясняет это требование. Кстати, не могли бы вы принять мой ответ, если он решит вашу проблему?
Конечно, большое спасибо за помощь. Я хочу задать дополнительный вопрос. Если я хочу реализовать интернационализацию на своей веб-странице, я попытался использовать контент: 't("select")', где t происходит из const {t} = useTranslation, и "select": "-- Select --" был определен в файле конфигурации i18n. Однако заполнитель не может быть отображен. Могу ли я узнать, в чем проблема? @Ахмет Эмре Килинч
Спасибо. Я разветвил и обновил stackblitz и добавил пример поддержки i18next. Вы можете взглянуть на это.
Большое спасибо за ваше решение, вы очень помогли. В настоящее время я создаю форму, используя React-Hook-Form, но сталкиваюсь с большими трудностями при использовании библиотеки при реализации моих пользовательских функций формы. Не могли бы вы помочь проверить мой еще один вопрос, размещенный по следующей ссылке? @Ахмет Эмре Килинч stackoverflow.com/questions/78503414/…
Большое спасибо за ваше решение. Я поиграл в ваш StackBlitz и обнаружил, что компонент работает только в том случае, если для содержимого установлено значение «'-- Select --'» или «»-- Select --»', он не работает, если для содержимого установлено значение '-- Выберите --' или "-- Выберите --". Почему это? @Ахмет Эмре Килинч