为什么 Bootstrap 背景和文本类没有在我的 React 组件中进行更改？

Question

我正在尝试进行如下类似的设计：

我输入的代码如下所示：

父组件：

<div className="container-fluid">
            <div className="row">
                <Contactbanner className="col-md-4 col-sm-1" contactInfo1="LESS THAN " contactInfo2="30 MIN" contactInfo3=" ARRIVAL" />
                <Contactbanner className="col-md-4 col-sm-1 text-warning bg-dark" contactInfo1="0(455) " contactInfo2="456 56 56" contactInfo3="" />
                <Contactbanner className="col-md-4 col-sm-1" contactInfo1="" contactInfo2="LIVE 24/7" contactInfo3=" SERVICE" />
            </div>
 </div>

子组件：

class Contactbanner extends React.Component{ 
render(){
return(
        <div className="col-md-4 p-2">
            <p className="text-center">{this.props.contactInfo1}<strong>{this.props.contactInfo2}</strong>{this.props.contactInfo3}</p>
        </div>
   )
 }
}

我面临的问题是背景颜色和文本颜色。在父组件中，第二次调用子组件时，我将 bootstrap class 名称添加为“text-warning bg-dark”，但浏览器没有任何变化。但是，col-md-6 和 col-sm-12 工作正常。

我检查了一下，元素看起来像这样：

我曾尝试在不使用道具的情况下制作此组件，但背景和文本颜色正常工作，而不是在使用道具时。

我想了解的是我的代码是否有任何问题，或者这是传递 props 时反应 bootstrap 的工作方式吗？

Answer 1

您没有将类名传递给子组件。 Contactbanner 组件呈现 div 但是当您将 className 分配给 Contactbanner 组件时，您还需要将其传递给 Contactbanner 组件的 return jsx 值。

像这样。

class Contactbanner extends React.Component{ 
render(){
return(
        <div className={this.props.className}>
            <p className="text-center">{this.props.contactInfo1}<strong>

{this.props.contactInfo2}</strong>{this.props.contactInfo3}</p>
        </div>
   )
 }
}

通过这种方式，您可以使用传递给此组件的 className 值，例如：

<Contactbanner className="col-md-4 col-sm-1 text-warning bg-dark" contactInfo1="0(455) " contactInfo2="456 56 56" contactInfo3="" />

为什么 Bootstrap 背景和文本类没有在我的 React 组件中进行更改？

Why Bootstrap background and text classes are not making changes in my react component?

reactjs

react-bootstrap

为什么 Bootstrap 背景和文本 类 没有在我的 React 组件中进行更改？

Why Bootstrap background and text classes are not making changes in my react component?

reactjs

react-bootstrap

为什么 Bootstrap 背景和文本类没有在我的 React 组件中进行更改？