Javascript 如何自定义反应将更多或更少的文本显示到材质UI图标

我正在使用react在我的spfx Web部件中使用react显示更多文本控制器。我需要在我的Web部件中用ExpandMore和ExpandLess材质ui图标替换showMore和showLess字符串链接。有什么方法可以做到这一点吗

{item[“description”]}

我引用了这个方法 将

直接传递给相关道具即可

<ShowMoreText
  more={<ExpandMore />}
  less={<ExpandLess />}
  ...
/>

演示

---

来源

import React，{useState}来自“React”；
导入“/styles.css”；
从“反应显示更多文本”导入ShowMoreText；
从“@material ui/icons/ExpandLess”导入ExpandLess；
从“@material ui/icons/ExpandMore”导入ExpandMore；
导出默认函数App（）{
const[expand，setExpand]=useState（false）；
const onClick=（）=>{
setExpand（！expand）；
};
const text=“123131311”；
返回(
{text}
);
}

---

我引用了这个{item[“description”]}我需要在show and less string propsis中添加以下材质图标有没有方法在more='show more'less='show less'中添加图标，它显示[sploadeError.loadComponentError]：***加载组件失败“4a4b6a0e-941e-4cb8-99ed-42b480f42980”（垂直时间线WPWebPart）。原始错误：**未能从组件“4a4b6a0e-941e-4cb8-99ed-42b480f42980”（垂直时间线WPWebPart）加载入口点.Original error:Minified React error#321；访问获取完整消息，或使用非Minified dev环境获取完整错误和其他有用警告。@BiniJacob它与本文无关，请查看在线演示，不胜感激。

import React, { useState } from "react";
import "./styles.css";
import ShowMoreText from "react-show-more-text";
import ExpandLess from "@material-ui/icons/ExpandLess";
import ExpandMore from "@material-ui/icons/ExpandMore";

export default function App() {
  const [expand, setExpand] = useState(false);
  const onClick = () => {
    setExpand(!expand);
  };
  const text = "12313131313131311";
  return (
    <div className="App">
      <ShowMoreText
        lines={2}
        more={<ExpandMore />}
        less={<ExpandLess />}
        onClick={onClick}
        expanded={expand}
        width={30}
      >
        {text}
      </ShowMoreText>
    </div>
  );
}