Panel header size is not changing in React-Bootstrap

user_7528957 0
Viewed 1479

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?

react-bootstrap bootstrap-4 reactjs css
2 Answers

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.

enter image description here

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

You can easily do that using something like below

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

Below is a JSFiddle for the same

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

And the result is

Header with font

Why h1, h2, h3 has no impact on size?

By default the React component is assigning a panel-title class which has a font-size of 16px specified. So whichever tag you use, the font-size will be overridden by the class

Font of panel-title

user_28308500
Related