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

Posted 2023-02-22

【中文标题】React-Bootstrap 中的面板标题大小没有变化

【英文标题】：Panel header size is not changing in React-Bootstrap

【发布时间】：2017-10-25 09:44:51

【问题描述】：

我正在尝试在 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>

有什么可行的方法建议吗？

【问题讨论】：

我也遇到了这个问题。 The documentation 声称您可以使用 componentClass 道具，但我认为将其设置为 h1 或 h3 之间没有区别。

标题渲染了吗？我在最新的文档中没有看到 Panel 中的 header 道具。你指的是哪个文档？此外，react-bootstrap 仍以 bootstrap-3 为目标。

你能告诉我们你使用的react-bootstrap的版本吗？

【参考方案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;
 

【参考方案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 都会被类覆盖

【讨论】：

当您已经拥有<h1> 标签时，为什么还需要titleStyle？据我所知，无论您使用哪个h 标签，默认情况下标题都是相同的大小。