Panel header size is not changing in React-Bootstrap

Question

I'm trying to change the size of the header in the React-Bootstrap Panel in a Typescript app. I wrapped the text in <h1> tags, as it's mentioned in the documentation, but nothing is being changed.

I tried to add an inline style, or even a css className in which I'm trying to change the fontSize, but again there's no result.

Here's the code.

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>

Any suggestions of a possible way to do this?

Answer 1

http://jsfiddle.net/L5tLot9h/

Becuase panel-title has a default font-size so you need to use !important for overriding the previously assigned 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>

Why does (h1 or h2... etc) elements do not apply the font-size?

As we can see below the h1 font-size it doesn't apply because of the panel-title it has the font-size property and in this case, the panel-title class will take the priority.

What do you need to fix this?

You can use the inline-style as I did above plus using !important.

or

Give the selector a higher specificity (adding an additional tag, id or class to the selector), or add a CSS rule with the same selector at a later point than the existing one (in a tie, the last one defined wins).

CSS file

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;
}