我的设计有3个分区。一个左面板（过滤器），主要内容，其中包含一个卡显示在一个网格和一个右面板（信息）。侧面板有一个按钮，用户可以打开和关闭像一个抽屉。我抵消了主要内容使用顺风ml的边距左相对于左面板的宽度和类似的权利。
如果面板是打开的，扩展宽度并更新网格的左边距。反之亦然。
这是我的代码。右面板工作正常。但左面板有问题。默认情况下，左面板是打开的。当我通过回调方法toggleFilterVisibility单击按钮关闭它时，面板关闭，但网格显示无边距（它完全覆盖了要重新打开的左面板）我检查了组件的状态，它们正在按预期使用回调进行更新。我还删除了ml-[${filterPanelWidth}px]以及正确呈现的字符串常量ml-[65px]和ml-[250px]。
我怀疑我在等待状态更新之前实现了动态渲染，但tailwind不正确或其渲染不正确。console.log(filterPanelWidth)并单击按钮显示了filterPanelWidth和filterPanelVisibility的正确状态更改。

<div className={`bg-gray-100 pt-14 ml-[${filterPanelWidth}px]`}>

import FilterPanel from "../components/FilterSidePanel";
import InfoPanel from "../components/InfoSidePanel";
import CardGridPanel from "../components/CardGridPanel";

const HomeRoute: React.FC = () => {
  const [filterPanelWidth, setFilterPanelWidth] = useState(250);
  const [isFilterPanelVisible, setFilterPanelVisibility] = useState(true);
  const [infoPanelWidth, setInfoPanelWidth] = useState(45);
  const [isInfoPanelVisible, setInfoPanelVisiblity] = useState(false);

  const toggleFilterVisibility = () => {
    if (isFilterPanelVisible) {
      setFilterPanelWidth(65);
    } else {
      setFilterPanelWidth(250);
    }
    setFilterPanelVisibility(!isFilterPanelVisible);
  };

  const toggleInfoVisibility = () => {
    if (isInfoPanelVisible) {
      setInfoPanelWidth(45);
    } else {
      setInfoPanelWidth(600);
    }
    setInfoPanelVisiblity(!isInfoPanelVisible);
  };

  return (

    <>
      <div className="main-content w-full bg-gray-100">
        <div className="flex">
          <div className="left-sidepanel-content bg-white fixed h-screen">
            <FilterPanel toggleVisibility={toggleFilterVisibility} isVisible={isFilterPanelVisible}/>
          </div>
          <div className={`bg-gray-100 pt-14 ml-[${filterPanelWidth}px]`}>
            <CardGridPanel />
          </div>
          <div className={`right-sidepanel-content right-0  bg-white w-[${infoPanelWidth}px] fixed h-screen`}> 
            <InfoPanel toggleVisibility={toggleInfoVisibility} isVisible={isInfoPanelVisible}/>
          </div>
        </div>
      </div>
    </>
  );
};

export default HomeRoute;

• • 更新1：**在查看文档后，我尝试应用顺风的动态渲染，如下所示：

<div className="bg-gray-100 pt-14 {{ isFilterPanelVisible ? 'ml-[250px]' : 'ml-[65px]' }}">
            <CardGridPanel />
          </div>

但是在检查元素时，我看到了下面的字符串。我该如何解决这个问题呢？我还尝试用反引号

替换引号