Я использую MDBoostrap (аналог Bootstrap) для стилизации своих элементов в приложении React. Теперь у меня есть элемент select, который написан так, как показано ниже.
<div>
<select id="Regions" style={errorSelect} value={this.state.userRegionId} onChange={this.handleRegionChange}>
{this.handleGetRegions()}
</select>
</div>
Когда он рендерится, он генерирует такой HTML-код, как этот.
Я пытался сделать что-то подобное.
//...
const errorSelect = {
borderBottom: '2px solid #FF0000'
};
//...
<select id="Regions" className={errorSelect} value={this.state.userRegionId} onChange={this.handleRegionChange}>
{this.handleGetRegions()}
</select>
//...
Как вы можете видеть, даже если я применю элемент className или style в своем коде React, это не повлияет, так как основной пользовательский интерфейс отображается / переводится в элементы input и ul. Любая идея о том, как я могу применить свой собственный CSS путем переопределения (или добавления дополнительного стиля) к этому?