#css #reactjs #typescript
#css #reactjs #typescript
Вопрос:
Я использую эту библиотеку:https://www.npmjs.com/package/react-date-picker для отображения средства выбора даты в моем приложении. Я привык работать с Angular и относительно новичок в react и практически не разбираюсь в том, как стилизовать компоненты, предоставляемые этими библиотеками.
Ниже приведена настройка средства выбора даты в возвращаемых функциях react render():
<DatePicker
name="date"
value={Moment(values.date, 'YYYY/MM/DD').toDate()}
onChange={this.handleDateChange}
maxDate={maxDate}
minDate={minDate}
/>
Средство выбора, сгенерированное datepicker, представляет собой поле ввода, и я хочу удалить верхнюю и боковые границы, чтобы оно напоминало средства выбора material-ui, которые представляют собой просто текстовое поле с типом =’date’ (https://material-ui.com/demos/pickers /) .
На другой ноте. Текстовое поле material имеет свойство label, но в api для api выбора даты ничего не упоминается о реквизите label, но есть ли способ добавить его или лучший подход — просто вставить div над тегом и оформить его так, чтобы он выглядел как label?
Спасибо ~
Обновить:
поиграв с консолью, я обнаружил, что атрибут className применяет свои стили к классу react-date-picker, в то время как на границу влияет класс-оболочка___ react-date-picker___. Как я могу изменить стили этого класса, используя свойство className, предоставляемое api, с которым в настоящее время безуспешно работают T_T
Комментарии:
1. вы можете добавлять любые стили, которые хотите, добавив реквизит style. Также я не думаю, что вам нужна эта библиотека пользовательский интерфейс material, который вы собираетесь использовать, использует средство выбора даты по умолчанию в браузерах и стилизует только простой входной тег. Добавьте стили, подобные этому: <тип ввода=’date’ style={{ border: ‘none’, color: ‘red’}} обратите внимание, что значения должны быть строковыми
2. Да, это кажется проще, но там эта библиотека построена на react-calendar, который лучше соответствует моим потребностям.
3. Предоставленная вами библиотека не делает ничего особенного, кроме создания средства выбора даты в пользовательском стиле. В любом случае просто установите style={{}} в <DatePicker /> и поиграйте с ним.
4. ну, это было первое, что я попробовал, но это выдает следующую ошибку: тип ‘{ style: {}; name: string; value: Date; onChange: (e: any) => void; maxDate: Дата; minDate: Дата; }’ не может быть присвоен типу ‘IntrinsicAttributes amp; DatePickerProps’. Свойство ‘style’ не существует для типа ‘IntrinsicAttributes amp; DatePickerProps’
5. Я думаю, что вместо использования встроенного стиля api предоставляет параметр className, который вы можете использовать, чтобы повлиять на div средства выбора даты или календаря, поэтому я попробую использовать это.