Overriding CSS for rendered MDBootrap elements

Question

I am using MDBoostrap (similar to Bootstrap) for styling my elements in a React app. Now I have a select element which is written like as shown below.

<div>
    <select id="Regions" style={errorSelect} value={this.state.userRegionId} onChange={this.handleRegionChange}>
      {this.handleGetRegions()}
    </select>
</div>

When it renders, it generates some HTML like this.

I tried doing something like this.

//...
const errorSelect = {
  borderBottom: '2px solid #FF0000'
};
//...
<select id="Regions" className={errorSelect} value={this.state.userRegionId} onChange={this.handleRegionChange}>
  {this.handleGetRegions()}
</select>
//...

As you can see, even if I apply className or style element in my React code, it won't affect since the main UI gets rendered/translated to input and ul elements. Any idea on how I can apply my own CSS by overriding (or adding an extra style) to this?

score 0 · Answer 1 · answered May 07 '19 at 12:05

0

You can force your own css with adding " !important " a the end of the line of css. And your own css file must be import after the css file of MDBootstrap. Hope I help.

answered May 07 '19 at 12:05

Clément M

43
4

It won't work because the elements after being rendered are not the `select` but `input` and `ul` elements, which gets transformed by the MDBootstrap. I have already explained this above. – Souvik Ghosh May 07 '19 at 12:23

score 0 · Answer 2 · answered Mar 06 '23 at 10:42

You will need to override MDB CSS classes such as select-options-wrapper, select-option, and select-option-group. However, if you do override them, they will be overridden for all instances of select as there does not seem to be any easy way to target specific instances.

Overriding CSS for rendered MDBootrap elements

2 Answers2