为什么我应该在react bootstrap按钮中使用变体prop而不是className ?

Question

为什么要在react-bootstrap中使用variantprop ?是否可以使用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- 100fs - 5mb -2等引导类。Variant是一个只接受特定值的属性:'primary'、'secondary'等。

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

一个或多个按钮变体组合

按钮可以是各种视觉变体之一，例如:

"初级"、"中等"、"成功","危险"、"警告"、"信息",'dark'， 'light'， 'link'

以及"outline"版本(以'outline-*'为前缀)

'outline-primary'， 'outline-secondary'， 'outline-success'，'outline-danger'， 'outline-warning'， 'outline-info'， 'outline-dark'，"outline-light">

属性"变量";颜色您的按钮，根据您的主题。它不是一个引导类，而是一个属性，因为React -bootstrap试图尽可能多地采用React组件，并试图避免使用类。

Answer 2

据我所知，variant字符串只是作为btn-${variant}被注入到类字段中，所以只要你使用字符串它就会通过。

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

所以是的，基于variant道具的当前实现，你的代码将工作，只要你把按钮的变体你之后作为字符串的第一部分。也就是说，这不是理想的方法。

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

上面是更好的，如果框架被更新，更不容易被破坏，也给任何阅读你的代码的人更多的清晰度…也就是说，你是对的，在React Bootstrap中当前的Button实现中，我看不到功能上的差异。

Answer 3

我认为人们使用变体是为了不写5个类名，这是我喜欢的想法。