javascript - How to customize react-show-more more or less text to Material-UI Icons - Stack Overflow

admin管理员组

文章数量:1401604

I'm using react show more text controller in my spfx webpart using react. i need to replace showMore and showLess string link with ExpandMore and ExpandLess material ui icons in my webpart.is there any method for this?

<ShowMoreText
  /* Default options */
  lines={2}
  more="Show More"
  less="Show less"
  anchorClass=""
  onClick={this.executeOnClick}
  expanded={false}
>
  {item["description"]}
</ShowMoreText>

I refered this

I'm using react show more text controller in my spfx webpart using react. i need to replace showMore and showLess string link with ExpandMore and ExpandLess material ui icons in my webpart.is there any method for this?

<ShowMoreText
  /* Default options */
  lines={2}
  more="Show More"
  less="Show less"
  anchorClass=""
  onClick={this.executeOnClick}
  expanded={false}
>
  {item["description"]}
</ShowMoreText>

I refered this https://npmjs./package/react-show-more-text

• javascript
• html
• css
• reactjs
• material-ui

Share Improve this question Follow edited Mar 23, 2020 at 5:45 keikai 15.2k1010 gold badges5555 silver badges7272 bronze badges asked Mar 23, 2020 at 5:18 Bini JacobBini Jacob 5311 silver badge66 bronze badges 3

• npmjs./package/react-show-more-text i referred this – Bini Jacob Commented Mar 23, 2020 at 5:22
• <ShowMoreText /* Default options */ lines={2} more='Show More' less='Show less' anchorClass='' onClick={this.executeOnClick} expanded={false} > {item["description"]} </ShowMoreText> i need the following material icons in show and less string props – Bini Jacob Commented Mar 23, 2020 at 5:23
• is there any method to add icon in more='Show More' less='Show less' – Bini Jacob Commented Mar 23, 2020 at 5:29

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 5

Method

Pass the <Icon /> directly to related props would work fine.

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

Demo

---

Source

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>
  );
}

本文标签： javascriptHow to customize reactshowmore more or less text to MaterialUI IconsStack Overflow