React中使用Styled-Components设置Material Icon样式不生效如何解决？

styled-components 为自定义组件设置样式时，会自动将生成的专属样式类名以className属性的形式传递给目标组件。你定义的ArrowIcon组件没有接收这个属性，也没有将其绑定到实际渲染的<i>标签上，所以生成的样式规则没有挂载到对应DOM元素，最终表现为样式不生效，元素审查面板也看不到对应规则。

调整ArrowIcon组件的定义，接收并绑定className属性到<i>标签即可，修改后代码如下：

const ArrowIcon = (props) => (
  // 把styled生成的className拼接到原有类名后
  <i className={`material-icons-outlined ${props.className}`}> {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"}/> 
  </>
)

注：平级JSX元素需要包裹在React Fragment（<></>）或其他容器组件中，避免语法报错

修改后样式会正常生效，元素审查面板也可以看到对应的样式规则。

内容的提问来源于stack exchange，提问作者meivinay