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

【问题标题】：antd react seting font size on breakpointantd react 在断点处设置字体大小
【发布时间】：2021-02-20 19:10:09
【问题描述】：

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

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

【问题讨论】：

不应该用css标记这个问题吗？

标签： reactjs antd

【解决方案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，而对于

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

【讨论】：