如何使用 React 向按钮添加自定义 bsStyle 属性
介绍
React 遵循基于组件的架构，其中包含各种 HTML 元素来创建应用程序的用户界面模块。
组件中的每个元素都包含基于其类型的单独属性。例如，文件上传控件的类型为文件，文本输入控件的类型为文本。
在本指南中，您将学习如何使用bsStyle属性为react-bootstrap按钮设置自定义样式和类。
笔记
react-bootstrap支持名为bsStyle的属性，但现在它已被名为variant的新属性取代。
react-bootstrap 中的 bsStyle/variant 属性是什么？
react-bootstrap元素与vanilla bootstrap完全相同；唯一的区别是react-bootstrap的所有方面都被 React 应用程序重写和使用。
变体属性根据特定行为（例如主要、次要、危险、警告）为元素提供样式变体。
使用 bsStyle/variant 属性提供自定义样式
当涉及元素的自定义样式时，样式是重要方面之一。因此，您可以使用变体属性。
<Button variant="default">
TEST BUTTON
</Button>
<Button>元素可以从库react-bootstrap中使用，并且属性variant定义按钮元素的默认样式。
现在，如果您想为按钮添加另一种不同的颜色或背景怎么办？此解决方案使用styles属性以及variant属性，并且可以使用自定义样式修改按钮元素。
下面是一起使用变体和样式属性的完整示例。
import React, { Component } from "react";
import { Button } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";
import './style.css';
class CustomStyle extends Component {
render() {
return (
<div>
<span>Add custom style using bsStyle in react-bootstrap</span>
<hr />
<Button
variant="default"
style={{ color: "white", background: "silver" }}
>
TEST BUTTON
</Button>
</div>
);
}
}
export default CustomStyle;
如上例所示，有一个<Button>元素以及两个不同的属性，分别称为variant和style，如下所示。
<Button
variant="default"
style={{ color: "white", background: "silver" }}
>
TEST BUTTON
</Button>
通过使用变体，将应用默认样式，而通过使用样式，将应用基于自定义样式添加的属性。
使用 bsStyle/variant 属性提供自定义类名
在上面的例子中，我们除了变体属性外还应用了自定义样式。应用样式似乎是一种静态方法，不适合大型应用。
您可以应用不同的自定义类名以及变体属性，但在此之前，必须在样式表文件中创建类，如下所述。
样式.css
.textColor {
color: white
}
.bgColor {
background: purple
}
在样式表文件中，有两个不同的类，一个用于设置字体颜色，另一个用于设置按钮元素的背景颜色。
现在下一步是将这两个类应用于按钮元素，如下所示。
render() {
return (
<div>
<span>Add custom style using bsStyle in react-bootstrap</span>
<hr />
<Button variant="default" className="cool">
TEST TEXT
</Button>
</div>
);
}
例如，有一个<Button>元素与两个不同的属性variant和className一起使用。
在前面的例子中，当样式以内联方式指定时使用样式属性，但在上面的例子中提供了两个自定义类名，如下所示。
<Button variant="default" className="textColor bgColor">
TEST TEXT
</Button>
通过这样做，默认变体将应用于按钮元素，并且自定义类将反映在按钮元素中。
结论
react-bootstrap库可以灵活地通过使用诸如variant之类的附加属性来定义在某些上下文中驻留在 React 应用程序中的任何元素的自定义行为。
在本指南中，您学习了使用 bsStyle/variant 属性应用自定义样式的两种简单方法，我希望它在设计react-bootstrap 元素的样式时有所帮助。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
请先 登录后发表评论 ~