React-bootstrap 组件字体大小

Question

我想手动更改 ReactJS 项目的字体大小。我试着添加像

这样的东西

* {
    font-size: 10px;
}

这适用于纯文本的所有内容。但是，

react-bootstrap

中的每个组件（例如，DropdownButton、Panel）都保持大字体。因此，将那些

react-bootstrap

组件的字体大小更改为与其他纯文本相同的正确方法是什么？内联样式有效，但我希望将更改应用于 .css 文件。谢谢！

编辑：面板标题代码片段：

  <Panel>

    <Panel.Heading>
      <Panel.Title>
         title here 
      </Panel.Title>
    </Panel.Heading>
  ...

Answer 1

要更改项目中all文本的字体大小，请使用

* {font-size: 10px;}

或者，您可以将样式道具传递给组件，例如：

<Panel.Body style={{fontSize: 10}}

Answer 2

很简单，你可以在 jsx 按钮或任何元素中添加

style={{fontSize:"10px"}}

，这将直接应用于你的 jsx 元素，引导程序默认值将不起作用。

Answer 3

    <p className="fw-bold">Bold text.</p>
      <p className="fw-bolder">Bolder weight text </p>
      <p className="fw-normal">Normal weight text.</p>
      <p className="fw-light">Light weight text.</p>
      <p className="fw-lighter">Lighter weight text</p>
/* Or text formatting like a - h1, h2, h3, h4, h5, h6 */
<p className="fs-1">H1 text</p>
      <p className="fs-2">H2 text</p>
      <p className="fs-3">H3 text</p>
      <p className="fs-4">H4 text</p>
      <p className="fs-5">H5 text</p>
      <p className="fs-6">H6 text</p>