解決Tailwind CSS的React抽屜元件關閉動畫問題的方法-PHP中文網路問答

在我的React專案中，我還使用了tailwind CSS，我實現了在選單中點擊圖示後開啟抽屜的功能。

問題是，在我的實作中關閉動畫遺失了（開啟動畫保持正常）。

讓我們來看這個組件：

import React, { useState } from 'react'; import {Link} from "react-router-dom"; import {PlusCircleIcon} from "@heroicons/react/24/solid"; import AddRecordTabs from "../record/AddRecordTabs"; import {Drawer} from "@material-tailwind/react"; const Menu = () => { const [open, setOpen] = React.useState(false); const openDrawer = () => { setOpen(true); }; const closeDrawer = () => { setOpen(false); }; React.useEffect(() => { if (open) { document.body.style.overflow = "hidden"; } else { document.body.style.overflow = "auto"; } }, [open]); return (       
 
 {open && ( <>  { closeDrawer(); } }>
   closeDrawer()} size={window.innerHeight * 0.9} className="pt-2 bg-green-50 border-t-1 border-green-900 rounded-t-[10px]" >    
 
  
  )} 
 ); } export default Menu;

我們不需要擔心AddRecordsTabs組件和傳遞的值，因為它基本上只是傳遞了關閉抽屜的功能。

我做錯了什麼？有什麼錯誤？