React Material UI 图标响应性

Question

How can i make the material icon to responsive font-size ? My current code is

<div>
  <div
    style={{
      margin: "5px",
      display: "flex",
      alignItems: "center",
      flexWrap: "wrap",
    }}
  >
    <ArrowBackIosIcon fontSize="14px" />
    <p>Text</p>
  </div>
  <div>
    <p>Text</p>
  </div>
  <div>
    <p>Text</p>
  </div>
</div>

i want to change the font size of the icon on mobile and tablet.

FYI: i am using react and material ui library.

Answer 1

你可以这样做：

<ArrowBackIosIcon sx={{fontSize: { xs: 12, sm: 16, md: 25, lg: 30 } }} />