为什么React组件中Bootstrap的背景与文字类样式不生效？

问题原因 #

• 自定义组件的props不会自动绑定到内部DOM元素：你给Contactbanner传入的className仅保存在组件的props对象中，没有手动绑定到内部根div上，因此所有传入的类名都不会实际生效。
• 你之前误以为栅格类生效，是因为子组件根div写死了col-md-4类，和你传入的栅格类刚好重合，并非父组件传递的类名成功生效。

解决方法 #

修改子组件代码，将父组件传入的className和内部固定类名拼接后绑定到根元素即可，同时可删除子组件中冗余的栅格类避免样式冲突：

class Contactbanner extends React.Component{ 
  render(){
    return(
        // 拼接传入的className和内部固定类名，加默认值避免未传className时出现undefined
        <div className={`${this.props.className || ''} p-2`}>
            <p className="text-center">{this.props.contactInfo1}<strong>{this.props.contactInfo2}</strong>{this.props.contactInfo3}</p>
        </div>
   )
 }
}

修改后你传入的text-warning、bg-dark等样式类就会正常生效。

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