Css 如何使用 Ant Design 为不同的屏幕尺寸制作自定义组件样式

发布于09月11日

我正在试图弄清楚如何判断我当前的屏幕尺寸，并在此基础上设置蚂蚁设计的特定宽度/高度.对于antd的最新版本5+，我使用的是设计令牌，而不是更少的css.

更具体地说，我正在寻找一种方法来做网格组件正在做的事情，我只想传递应该zoom 我的组件的xs, sm, md, lg, xl, xxl的信息.我在文档中找不到应该如何做到这一点.

推荐答案

您可以使用useBreakpoint钩子和自定义js/ts文件来处理您的样式.

/**
 * component.js/ts
 */
import Styles from "path/to/styles";

function Index() {
  const S = Styles();

  return <Input style={S.Input} />;
}

/**
 * styles.js/ts
 */
import { CSSProperties } from "react";
import { Grid } from "antd";

type StylesType = {
  Input: CSSProperties;
  OtherComponent: CSSProperties;
};

const { useBreakpoint } = Grid;

function Styles(): StylesType {
  const breakpoints = useBreakpoint();

  const Input: CSSProperties = {
    width: (() => {
      // you can now use any breakpoint and 
      // return different styles based
      if (breakpoints.xs) return "100%";
      if (breakpoints.sm) return "50%";
      if (breakpoints.md) return "25%";
      if (breakpoints.lg) return "10%";
      // default style
      return "100px";
    })()
  };

  const OtherComponent: CSSProperties = (() => {
    if (breakpoints.xs) return {
      width: '100%',
      color: 'red'
    }

    if(breakpoints.sm) return {
      width: '100px',
      color: 'blue'
    }
  })()

  return {
    Input,
    OtherComponent
  };
}

export default Styles;

Here是一个正常工作的代码和方框示例.

希望这能有所帮助