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 属性，在这种情况下，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;
} 

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 都会被类覆盖