Question

我想修改react-bootstrap组件的默认样式。

例如，我使用Panel组件，我希望有一个粗体标题。我怎样才能做到这一点？如果我使用bsClass，那么我将松开“警告”面板的所有默认样式。

创建一个类的最佳方法是什么，它继承了默认面板类中的所有内容，并且只允许覆盖我们想要的属性？

谢谢，

亨利

Answer 1

bootstrap文档实际上包含一个粗体标题here的示例。您可以使用已应用了font-weight bold的标题标记，并使用“panel-title”类进行大小调整和对齐。以下是我正在讨论的文档中的示例：

<div class="panel panel-default">
  <div class="panel-heading">
    <h3 class="panel-title">Panel Title</h3>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

但如果您的问题更通用，即如何更改内置样式？，任何正常的css机制都应该有效，例如使用强标记：

<div class="panel panel-warning">
  <div class="panel-heading">
    <strong>Panel Title</strong>
  </div>
  <div class="panel-body">
    Panel content
  </div>
</div>

或添加内联样式：

<div class="panel panel-warning">
  <div class="panel-heading" style="font-weight: bold">Panel Title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

或者（可能更喜欢）来自您自己的外部样式表中的另一个类：

/* CSS file */
.bold {
  font-weight: bold
}

<div class="panel panel-warning">
  <div class="panel-heading bold">Panel Title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

如果您正在讨论将所有面板标题修改为粗体，那么您应该1）复制“panel-heading”的引导程序定义，将您想要的更改复制到您的副本中，并将它放在一个更高优先级的样式表（即页面下方），因此它优先（但这会增加你的css负载的重量），2）修改现有的bootstrap代码（坏主意），或3）编译你自己的版本使用通过导入主引导较少的文件并用自己的东西补充它们。最后一个绝对是最灵活的，可以说是最好的，但它更多的工作。但是这种方法会让你“继承”样式（正如你所说的那样），因为你可以将其他类作为自己类的一部分应用，例如：

.bold-heading {
  .panel-heading; // Apply base panel-heading styles
  font-weight: bold; // And override the stuff you want to change
}

自定义反应引导程序中的组件样式

1 个答案: