有時候在排版時，常常會用卡片(Card)來做一個區塊排版

當內容過多時 會用 Accordion 去做摺疊內容，類似先顯示標題，有興趣再點開

使用handleChange 的 expanded去做開闔動作

使用到的 function

  const [expanded, setExpanded] = React.useState<string | false>("false");

  const handleChange = (panel: string) => (
    event: React.SyntheticEvent,
    newExpanded: boolean
  ) => {
    setExpanded(newExpanded ? panel : false);
  };

reture 的JSX

  <Accordion
        expanded={expanded === "panel1"}
        onChange={handleChange("panel1")}
      >
        <AccordionSummary aria-controls="panel1d-content" id="panel1d-header">
          <Typography>百靈果開10萬懸賞匿名粉專現身辯論</Typography>
        </AccordionSummary>
        <AccordionDetails>
          <Typography>
            《百靈果News》為台灣熱門Podcast節目，主持人為凱莉和Ken，日前遭匿名粉專「詹姆士的訐譙時間」點名是假中立的「假文青左膠」，百靈果對此則提出以10萬元獎金懸賞要詹姆士來上節目「面對面說清楚」，同樣被詹姆士點名的台北市議員「呱吉」邱威傑也加碼5萬元。不過針對百靈果的做法
          </Typography>
        </AccordionDetails>
      </Accordion>

Day 21