antd React 在断点处设置字体大小

Question

如何根据 antd React 中的断点设置字体大小？

<Text type={"secondary"} style={{fontSize: '36px'}}>Message to {userName}</Text>

Answer 1

使用 antd，您可以使用 useBreakpoint 钩子，它返回当前到达的断点。然后只需根据 useBreakpoint 返回的断点有条件地选择字体大小即可。

const Component = () => {
  const {lg} = useBreakpoint(); // lg is one of the elements returned if screenwidth exceeds 991
  const myFontSize = lg ? '36px' : '24px';
  return (
    <Text type={"secondary"} style={{fontSize: myFontSize}}>Message to {userName}</Text>
  )
}

此代码在 >=992 屏幕宽度时的字体大小为 36，对于 <992 屏幕宽度，将使用 24。如果您想要自定义断点或行为，您始终可以使用带有媒体和类的普通 css 来实现相同的效果。

断点文档 https://ant.design/components/layout/