I am currently using MDBoostrap, a styling tool similar to Bootstrap, in my React application. I have a select element that is coded like so:
<div>
<select id="Regions" style={errorSelect} value={this.state.userRegionId} onChange={this.handleRegionChange}>
{this.handleGetRegions()}
</select>
</div>
Upon rendering, it produces HTML output as shown here: https://i.stack.imgur.com/5h7Po.png.
I attempted the following approach:
//...
const errorSelect = {
borderBottom: '2px solid #FF0000'
};
//...
<select id="Regions" className={errorSelect} value={this.state.userRegionId} onChange={this.handleRegionChange}>
{this.handleGetRegions()}
</select>
//...
However, applying className or style directly in my React code does not seem to have any effect, as the main UI renders/translates to input and ul elements. Any suggestions on how I can implement custom CSS by either overriding existing styles or adding extra styles?