面板标题大小在React-Bootstrap中没有变化

Question

我试图在Typescript应用程序中更改React-Bootstrap面板中标题的大小。我将文本包装在<h1>标签中，正如文档中提到的那样，但没有任何内容被更改。

我尝试添加内联样式，甚至是我尝试更改fontSize的css className，但是再次没有结果。

这是代码。

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属性，所以它不适用，在这种情况下，{ {1}}课程将优先考虑。

你需要解决这个问题？

您可以像我上面一样使用panel-title并使用inline-style。

或

为选择器赋予更高的特异性（向选择器添加额外的标记，id或类），或者在稍后的位置添加具有相同选择器的CSS规则（在平局中，最后一个定义获胜） ）。

CSS文件

!important

Answer 2

您可以使用以下内容轻松完成此操作

var {Button, PanelGroup, Panel, ButtonGroup, DropdownButton, MenuItem} = ReactBootstrap

const titleStyle = {'fontSize': '50px'}

const title = <h1 style={titleStyle}>Tarun</h1>;

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


var mountNode = document.getElementById("app")
ReactDOM.render(nav, mountNode);

下面是相同的JSFiddle

http://jsfiddle.net/6u0eaqur/1/

结果是

为什么h1，h2，h3对大小没有影响？

默认情况下，React组件分配的panel-title类指定了font-size 16px。因此，无论您使用哪个标记，font-size都将被类重写