Question

我是新手，无法理解bsClass和className之间的概念。

我尝试实现修改后的按钮样式，例如：

<Button bsClass="btn-custom" >Custom button</Button>

当我用bsClass替换className时，它不起作用。

但在其他方面，使用相同的custom.css源代码，我实现了：

<img src={logo} alt="logo" className="app-logo" />并且有效。

Answer 1

JSX属性className等同于HTML class。所以下面的JSX

<span className="app-logo">Logo</span>

将等同于HTML

中的以下内容

<span class="app-logo">Logo</span>

根据bsClass考虑

<Button bsClass="btn-custom" >Custom button</Button>

将prop传递给reactJS中的Button组件，这就是它将用于在组件内设置className的内容

<button className={this.props.bsClass}>{this.props.children}</button>

因此它是react-bootstrap文档定义为属性的属性。

Answer 2

React＆＃39; s className与CSS中的常规类完全相同。

HTML / CSS：

<div class='red-text'>
    Foo
</div>

阵营/ JSX：

<div className='red-text'>
    Foo
</div>

上面的代码片段完全相同。我们在React（而不是className）中使用class的唯一原因是＆＃34; class＆＃34;已被视为JavaScript中的保留关键字。

正如其他人所说，bsClass是react-bootstrap包中的预定义类。就像CSS版本的Bootstrap带有自己的样式一样，反应引导也是如此。

Answer 3

实际差异。我将bsClass设置为除了REACT-Bootstrap默认的以外的东西，你必须自己做按钮的css主题。

通过添加className =“xx”，您仍然可以获得默认主题，但现在可以使用自己的.css

为颜色，填充等添加css样式。

.xx {
      magin-bottom: 2px
}