如何在React的className属性中同时使用Bootstrap类与自定义CSS样式

首先纠正你代码里的错误：React中元素的类名属性必须使用className（而非原生HTML的class），不能同时写class和className两个属性，需要把所有类名合并到同一个className中。

你可以通过以下两种方式实现同时应用Bootstrap的form-control类和自定义的loginStyle.passwordDiv样式：

方法一：模板字符串（推荐，可读性更高） #

<div className="form-group">
    <input 
        type="password" 
        className={`form-control ${loginStyle.passwordDiv}`} 
        id="exampleInputPassword1" 
        placeholder="Password"
    />
</div>

方法二：字符串拼接 #

<div className="form-group">
    <input 
        type="password" 
        className="form-control " + loginStyle.passwordDiv 
        id="exampleInputPassword1" 
        placeholder="Password"
    />
</div>

原理说明：不管用哪种方式，都是把两个类名用空格分隔后作为className的值，React会自动将它们解析为元素的多个CSS类，从而同时加载Bootstrap的样式和你的自定义样式。

内容的提问来源于stack exchange，提问作者Rocko