在反应中使用 Material Icon 和 Styled-Components

Posted 2023-02-22

【中文标题】在反应中使用 Material Icon 和 Styled-Components

【英文标题】：Use Material Icon along with Styled-Components in react

【发布时间】：2021-11-19 11:22:15

【问题描述】：

我正在尝试使用 google material icon webapi 在我的 react 应用程序中设置材质图标的样式。

我尝试过this，但它不起作用。该图标正在显示，但我应用的样式不起作用。当我检查它们时，它们甚至都没有显示。 我想给它一个绝对位置并移动它。

      const ArrowIcon = (props) => (
         <i className="material-icons-outlined"> props.icon </i>
      );
    
      const LeftBtn  =  styled(ArrowIcon)`
      position:absolute;
      font-size:100px;
      `;
      const RightBtn = styled(ArrowIcon)``;

return ( 
     <LeftBtn icon = "arrow_back" />
        <RightBtn icon = "arrow_forward"/> 
  )

编辑：我刚刚找到了对我有用的答案......这是链接，它就在我之前尝试的方法下方。

https://***.com/a/66222892/8680919

【参考方案1】：

你猜to pass the className prop in order to inject the generated className from CSS in JS：

const ArrowIcon = (props) => (
  <i className=classNames("material-icons-outlined", props.className)>
    props.icon
  </i>
);

【讨论】：

不工作，PS。我想给它一个绝对位置并移动它。该图标在屏幕上可见，但在 LeftBtn 或 RightBtn 中不采用 css 属性

我还想补充一下，onClick 在 LeftBtn 和 RightBtn 上也不起作用。我是样式化组件的新手。我真的不明白我在这里做错了什么/n 编辑-我为 onClick 做了一个解决方法，像这样` const ArrowIcon = (props) => ( props.icon );`