面板标题大小在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

您可以使用如下所示的方法轻松做到这一点

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具有指定 afont-size的类16px。因此，无论您使用哪个标签，font-size都会被该类覆盖