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

【问题标题】：Use Material Icon along with Styled-Components in react在反应中使用 Material Icon 和 Styled-Components
【发布时间】：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://stackoverflow.com/a/66222892/8680919

【问题讨论】：

标签： html css reactjs styled-components google-material-icons

【解决方案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} );`