如何在 React.js 中更改關於媒體查詢的 Font Awesome 道具？

Question

我在 React.js 中有一個 Font-Awesome 組件，我必須控制一些媒體查詢的圖標大小，所以基本上我們如何更改 Font-Awesome 組件的大小：

export const Revenue = (props) => (
  <div className={classes.Div}>
    <div>
      <FontAwesomeIcon
        style={{ marginTop: "20px" }}
        size="3x"                      //   @media(max-width: 415px) { size= 2x} and 3x for other
        icon={faDollarSign}
        color="#01CBC6"
      />
    </div>

    <div
      className={classes.SmallDiv}
      style={{
        display: "flex",
        flexDirection: "column",
      }}
    >
      <h3>{props.data.totalRevenue}</h3>
      <p>Total Revenue</p>
    </div>
  </div>
);

Answer 1

我正在查看FontAwesomeIcon的文檔，但我認為它不支持開箱即用。

由於您使用的是 CSS 模塊，您仍然可以為FontAwesomeIcon提供您的自定義 styles，這可以通過將正確的類添加到className來完成。

<FontAwesomeIcon
  icon={faDollarSign}
  className={classes.dollarIcon}
/>

然后，在您的 css 模塊文件上，您需要定義 CSS 屬性：

.dollarIcon {
  // add the rest here
  @media (max-width: 415px) { 
    height: ....;
    width: ....;
  }
}