Mantine UI中实现字体尺寸响应式的最优方案

不用修改全局rem，直接利用Mantine原生的主题响应式配置能力，就能精准控制不同屏幕下Text组件的sm、xxl尺寸，这是最贴合框架设计的方案，不会带来全局样式污染问题。

具体实现步骤： #

• 在自定义Mantine主题时，针对textSizes字段，为需要的尺寸（如sm、xxl）设置响应式值。Mantine支持将尺寸值定义为包含断点键的对象，每个断点对应不同的字体大小。
• 把配置好的主题通过MantineProvider注入到应用中，Text组件会自动读取主题中的响应式尺寸。

代码示例： #

import { MantineProvider, createTheme } from '@mantine/core';

const theme = createTheme({
  // 可自定义断点，也使用默认的xs、sm、md、lg、xl
  breakpoints: {
    xs: '360px',
    sm: '576px',
    lg: '1024px',
  },
  textSizes: {
    // sm尺寸：小屏幕（<lg）用14px，大屏幕（≥lg）用16px
    sm: {
      base: '14px',
      lg: '16px',
    },
    // xxl尺寸：小屏幕用24px，大屏幕用32px
    xxl: {
      base: '24px',
      lg: '32px',
    },
    // 其他尺寸保持默认或按需配置
    md: '16px',
    lg: '18px',
  },
});

function App() {
  return (
    <MantineProvider theme={theme}>
      {/* 你的应用内容 */}
      <Text size="sm">响应式小尺寸文本</Text>
      <Text size="xxl">响应式超大尺寸文本</Text>
    </MantineProvider>
  );
}

方案优势： #

• 精准可控：仅作用于Mantine的Text组件，不会影响全局其他使用rem的元素，避免样式冲突。
• 框架原生支持：完全遵循Mantine的设计体系，后续维护和扩展更方便，比如新增其他尺寸的响应式配置。
• 断点统一：可以复用主题中定义的断点，保证整个应用的响应式逻辑一致。

对比修改rem的方案：修改全局:root的font-size会影响所有依赖rem的样式，包括第三方组件或自定义样式，容易出现不可预期的布局问题，灵活性和安全性都不如主题配置方案。

内容的提问来源于stack exchange，提问作者Arthur Klezovich