如何在 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 提供自定义样式，这可以通过将正确的类添加到 className.

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

然后，在您的 css 模块文件中，您需要定义 CSS 属性：

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

如何在 React.js 中针对媒体查询更改 Font Awesome 道具？

How to change Font Awesome props with respect to media queries in React.js?

javascript

css

font-awesome

reactjs