样式化组件和 react-bootstrap答案

【问题标题】：Styling components and react-bootstrap样式化组件和 react-bootstrap
【发布时间】：2019-12-30 11:39:59
【问题描述】：

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

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

但是，此代码似乎与传统的className 一样有效。如果我将上面的代码更改为类似的东西，从功能上和美学上来说，

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

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

两者之间是否有任何功能差异，是否有理由使用variant 而不是className？

【问题讨论】：

标签： reactjs react-bootstrap

【解决方案1】：

这是引导按钮组件：

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

【解决方案3】：

variant和className的区别：

变体：
- 仅使用预定义的类
- 不需要外部库

类名：
- 可以使用自定义类
- 与HTML 属性class 的作用相同

我个人使用className

【讨论】：

【解决方案4】：

我个人不使用 React-Bootstrap，更喜欢将 CDN 包含到 Bootstrap 并使用 className 将类应用于我自己的组件。

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

【讨论】：