css - React-Bootstrap 中的面板标题大小没有改变

Question

我正在尝试更改 Typescript 应用程序中 React-Bootstrap 面板中 header 的大小。我将文字包裹在 <h1> 中标记，正如文档中提到的那样，但没有任何更改。

我尝试添加一个内联样式，甚至是一个 css className，我试图在其中更改 fontSize，但同样没有结果。

这是代码。

const title = (<h1>{Constants.gameTitle}</h1>);
<PanelGroup defaultActiveKey="1" accordion key="accordion1">
    <Panel defaultExpanded header={title} className="changeFontSize" eventKey="1" bsSize="large" bsStyle="primary">
     </Panel>
</PanelGroup>

有什么可行的方法可以做到这一点吗？

Answer 1

http://jsfiddle.net/L5tLot9h/

因为 panel-title 有一个默认的 font-size 所以你需要使用 !important 来覆盖之前分配的 CSS。

const title = (<h1 style={{fontSize: '80px !important'}}>{Constants.gameTitle}</h1>);
<PanelGroup defaultActiveKey="1" accordion key="accordion1">
    <Panel defaultExpanded header={title} className="changeFontSize" eventKey="1" bsSize="large" bsStyle="primary">
     </Panel>
</PanelGroup>

为什么 (h1 or h2... etc) 元素不应用 font-size？

正如我们在下面看到的 h1 font-size 它不适用因为 panel-title 它有 font-size 属性，在这种情况下，panel-title 类将优先。

您需要什么来解决这个问题？

您可以像我上面那样使用 inline-style 并使用 !important。

或

为选择器赋予更高的特异性(向选择器添加额外的标签、id 或类)，或在比现有选择器更晚的位置添加具有相同选择器的 CSS 规则(在平局中，最后定义的获胜) ).

CSS 文件

h1.panel-title {
    font-size: 36px;
}
h2.panel-title {
    font-size: 30px;
}
h3.panel-title {
    font-size: 24px;
}
h4.panel-title {
    font-size: 18px
}
h5.panel-title {
    font-size: 14px
}
h6.panel-title {
    font-size: 10px;
}