为渲染 MDBootstrap 元素覆盖 CSS答案

【问题标题】：Overriding CSS for rendered MDBootrap elements为渲染 MDBootstrap 元素覆盖 CSS
【发布时间】：2019-09-25 00:58:50
【问题描述】：

我正在使用 MDBoostrap（类似于 Bootstrap）为 React 应用程序中的元素设置样式。现在我有一个选择元素，如下所示。

<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>
//...

如您所见，即使我在我的 React 代码中应用 className 或 style 元素，它也不会影响，因为主 UI 被渲染/翻译为 input 和 ul 元素。关于如何通过覆盖（或添加额外样式）来应用我自己的 CSS 的任何想法？

【问题讨论】：

标签： javascript html css reactjs mdbootstrap

【解决方案1】：

您可以通过在 css 行的末尾添加“!important”来强制使用自己的 css。并且必须在MDBootstrap 的css 文件之后导入自己的css 文件。希望能帮上忙。

【讨论】：

它不会起作用，因为渲染后的元素不是select，而是input和ul元素，它们会被MDBootstrap转换。我已经在上面解释过了。