【AntDesign】解决嵌套section或layout中，h1字体比h2小问题

最新推荐文章于 2024-11-04 11:33:02 发布

原创最新推荐文章于 2024-11-04 11:33:02 发布 · 606 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #anti-design-vue

文章讲述了在AntDesignV5中，如何通过使用Typography组件和CSS覆盖浏览器默认样式来解决h1标签层级小于h2的问题，提供了两种解决方案：一是利用Typography组件管理层级，二是直接修改相关CSS属性。

问题：以下情况均会导致h1比h2小，具体原因是浏览器默认样式里面，对h1不同层级设置了特殊的样式，

<section class="css-dev-only-do-not-override-12q8zf4 ant-layout">
	<section class="css-dev-only-do-not-override-12q8zf4 ant-layout">
	</section>
</section>

import React from "react";
import "./index.css";
import { App, ConfigProvider, Layout } from "antd";
import "antd/dist/reset.css";
const { Content } = Layout;

export default () => (
  <ConfigProvider>
    <App>
      <Layout>
        <Content>
          <Layout>
            <Content>
              <h1>一级标题</h1>
              <h2>二级标题</h2>
            </Content>
          </Layout>
        </Content>
      </Layout>
    </App>
  </ConfigProvider>
);

解决：
方法1：嵌套Typography标签，antd v5 里不做完全覆盖了，全都推荐使用封装的组件来控制层级样式：

issue问题

在线演示

import React from "react";
import "./index.css";
import { Layout, Typography } from "antd";
import "antd/dist/reset.css";
const { Content } = Layout;

export default () => (
  <Layout>
    <Content>
      <Layout>
        <Content>
          <Typography>
            <h1>一级标题</h1>
            <h2>二级标题</h2>
            <h3>三级标题</h3>
            <h4>四级标题</h4>
          </Typography>

          <Typography.Title level={1}>一级标题</Typography.Title>
          <Typography.Title level={2}>二级标题</Typography.Title>
          <Typography.Title level={3}>三级标题</Typography.Title>
          <Typography.Title level={4}>四级标题</Typography.Title>
        </Content>
      </Layout>
    </Content>
  </Layout>
);

在这里插入图片描述
方法2：对css参数覆盖

 :-webkit-any(article,aside,nav,section) h1 {
      display: block;
      font-size: 2em;
      margin-block-start: 0.67em;
      margin-block-end: 0.67em;
      margin-inline-start: 0px;
      margin-inline-end: 0px;
      font-weight: bold;
    }