Zenn
Open4

Ant Design の PageHeader のタイトルの FontSizeを変更させてくれ

HarukiHaruki

fontFamily の変更は反映されるが fontSize の変更が反映されない (20pxで固定される)

import { PageHeader } from 'antd'

const sitePageHeader: React.CSSProperties = {
  border: '1px solid rgb(235, 237, 240)',
  padding: '0 10%',
  alignItems: 'leftCenter',
  height: '80px',
  display: 'flex',
  fontFamily: 'Museo Sans',
  fontSize: '24px',
}

const Header: React.FC = () => (
  <PageHeader
    style={sitePageHeader}
    onBack={() => null}
    title="App"
    backIcon=""
  />
)

export default Header
HarukiHaruki

antdのpageheaderの子要素に .ant-page-header-heading-title スタイルが当たっているのが原因っぽい

.ant-page-header-heading-title {
    margin-right: 12px;
    margin-bottom: 0;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
HarukiHaruki

ここの font-size をデベロッパーツールで外したら反映された