Material-UI 中的动态图标大小答案

【问题标题】：Dynamic icon size in Material-UIMaterial-UI 中的动态图标大小
【发布时间】：2020-07-07 21:14:31
【问题描述】：

我使用的是 materiel-UI 图标

<ArrowRightAlt/>

我可以通过fontSize来控制图标的大小

<ArrowRightAlt fontSize="large" />

但我希望 v 大小取决于窗口大小（如 md、xs、sm）

这个可以吗？

【问题讨论】：

标签： css reactjs material-ui

【解决方案1】：

以下是使用Box 执行此操作的一种方法。除了字体大小之外，我还更改颜色只是为了更容易判断它位于哪个断点。

import React from "react";
import ArrowRightAlt from "@material-ui/icons/ArrowRightAlt";
import Box from "@material-ui/core/Box";

export default function App() {
  return (
    <Box
      clone
      color={{ xs: "red", sm: "orange", md: "yellow", lg: "green", xl: "blue" }}
      fontSize={{ sm: 48, md: 96, lg: 192, xl: 384 }}
    >
      <ArrowRightAlt />
    </Box>
  );
}