为什么我应该在react引导按钮中使用变体道具而不是className？

Question

为什么我要使用variant道具中的react引导？是否可以使用className来指定按钮的样式？

const Test = () => {
    return (
        <div>
            <Button className="text-center" variant="primary w-100 fs-5 mb-2" type="submit"> Submit </Button>
        </div>
    );
};

export default Test;

Answer 1

您不应该在Button组件上使用诸如w-100 fs-5 mb-2等引导类。变体是只使用某些值的属性：“主值”、“次要值”等。

https://react-bootstrap.netlify.app/components/buttons/#button-props

一个或多个按钮变体组合

按钮可能是多种可视变体之一，例如：

“主要”、“次要”、“成功”、“危险”、“警告”、“信息”、“黑暗”、“光”、“链接”

以及“大纲”版本(以“大纲-*”开头)

“大纲-主要”、“大纲-次要”、“大纲-成功”、“大纲-危险”、“提纲-警告”、“大纲-信息”、“大纲-黑暗”、“大纲-光”

属性“变体”将您的按钮相应地添加到主题的颜色。它不是一个引导类，而是一个属性，因为react-bootstrap试图尽可能多地采用React组件，并试图避免使用类。

Answer 2

据我所知，variant字符串只是以btn-${variant}的形式注入到类字段中，所以只要使用字符串，它就会传递。

正如Igor所提到的，variant道具是为您添加所追求的按钮变体而设计的，而不是作为替代或添加到className道具中的。

因此，是的，根据variant支柱的当前实现，只要您将所追求的按钮变体作为字符串的第一部分，您的代码就会工作。尽管如此，这并不是解决问题的理想方式。

variant="primary" className="w-100 fs-5 mb-2"

如果框架被更新，上面的内容会更好，不太容易破坏，并且给任何阅读您的代码的人带来了更多的清晰.尽管如此，您是正确的，在React中使用Button的当前实现，我可以看到没有功能上的区别。

Answer 3

我想的是，人们使用变体来不写像5个类名，这就是我喜欢的想法。