Question

我正在使用React-Bootstrap，并使用bsClass将一些自定义类应用于组件：示例：

<Button bsClass="exit action">Exit</Button>

呈现的HTML为：

<button type="button" class="exit action exit action-default">Exit the Exam</button>

为什么要重复类名（退出和操作）？

Answer 1

来自React-Bootstrap文档中的按钮组件https://react-bootstrap.github.io/components/buttons/

bsClass：String -基础CSS类和组件的前缀。通常，只需更改bsClass即可为组件提供新的非Bootstrap CSS样式。

因此，bsClass只是一个添加到按钮的基类，以及实际样式类的前缀，以映射引导程序标准。

<Button>Default</Button>

生成

<button type="button" class="btn btn-default">Default</button>

因此

<Button bsStyle="primary" bsClass="custom">Default</Button>

将生成

<button type="button" class="custom custom-primary">Default</button>

，在您的情况下，按照惯例，-default的前缀是您提供的字符串exit action，它变成了exit action-default。
您可以通过构造CSS来保持此标准，或者理想情况下，建议使用bootstrapUtils创建自定义样式。 https://react-bootstrap.github.io/utilities/custom-styles/

为什么React-Bootstrap在元素中重复自定义类名？

1 个答案: