reactjs - antd react 在断点处设置字体大小

Question

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

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

标签： reactjsantd

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/