Question

我对React还是很陌生，开始检查React-Bootstrap和组件的样式。该文档使用variant清楚地为组件设置样式：

<Button variant="primary">Success</Button>

但是，此代码似乎可以与传统的className一起使用。在功能上和美学上，如果我将上面的代码更改为类似的内容，

<Button className="bg-primary">Success</Button>

输出完全相同。就我个人而言，我发现使用className属性更加容易，因为我可以编写像btn btn-primary...这样的香草引导程序类，而不是其他的react-bootstrap类。

两者之间在功能上是否有区别，是否有理由在variant上使用className？

Answer 1

我个人不使用React-Bootstrap，而是希望将CDN包含在Bootstrap中，并使用className将类应用于我自己的组件。

据我所知，这两种方法在功能上没有区别。

Answer 2

variant和className之间的区别：

变量：
-仅使用预定义的类
-无需外部库

className：
-可以使用自定义类
-与HTML属性class

相同

我个人使用className

Answer 3

Variant是 React-Bootstrap 组件的道具，该组件为不同的bootstrap组件包装了各种预定义的样式。您不能使用变体来定制React Bootstrap组件（如果您想偏离引导的主题）。

ClassNames是常规的CSS类，您可以在其中通过CSS向组件添加任何样式。之所以className="bg-primary"之所以起作用，是因为React-Bootstrap包含引导程序的css文件作为库的一部分。

Answer 4

这是引导按钮组件：

    const Button = props =>{
    const variant = props.variant?`btn-${props.variant}`:""
    return(
    <button className={`btn ${variant} ${props.className}`}
    onClick ={props.onClick}>
    </button>
    )
    }

样式化组件和react-bootstrap

4 个答案: