我有一個用復選框樹創建的UI樹反應-復選框-樹& quot:& quot1 . 5 . 1 & quot；) .我希望能夠使用css根據我的口味設計樹中的任何分支或層，例如在下一層放置一個滾動條，這不是根，我還想放置一個搜索輸入字段。然而，我不知道如何去做。基本上，我想根據自己的口味靈活地設計任何一層。

這就是我的州的樣子

[
    {
      value: "All",
      label: "All",
      children: [
        {
          value: "consultations",
          label: "Consultations",
          children: [
              {value: "ab", label: "AB"},
              {value: "ac", label: "AC"},
              {value: "ad", label: "AD"}, 
                 children:[
                        {value: "ab", label: "AB"},
                        {value: "ac", label: "AC"},
                        {value: "ad", label: "AD"}, 
                   ],
             },
            ],
        },
        {
          value: "investigation",
          label: "Investigation",
      
        },
        {
          value: "medication",
          label: "Medication",
     
        },
      ],
    },
  ];

我希望能夠在三個子數組中的每個子數組中添加一個滾動條。 我的用戶界面看起來是這樣的

<div>
        <CheckboxTree
          nodes={data}
          checked={checked}
          expanded={expanded}
          onCheck={handleCheck}
          onExpand={handleExpand}
          // showNodeIcon={false}
          icons={{
            check: (
              <div>
                <img src={checkMarkIcon} alt="checkMark" />
              </div>
            ),
            uncheck: (
              <div>
                <img src={uncheckedIcon} alt="not checked" />
              </div>
            ),
            halfCheck: (
              <div>
                <img src={indeterminateIcon} alt="indeterminate" />
              </div>
            ),
            expandClose: (
              <div>
                <img
                  src={frontArrowCoverage}
                  className="h-[13px] "
                  alt="indeterminate"
                />
              </div>
            ),
            expandOpen: (
              <div>
                <img
                  src={frontArrowCoverage}
                  className="h-[13px] rotate-[90deg]"
                  alt="indeterminate"
                />
              </div>
            ),
            expandAll: null,
            collapseAll: null,
            parentClose: null,
            parentOpen: null,
            leaf: null,
          }}
        />
      </div>

我嘗試從瀏覽器中檢查元素，并使用類名覆蓋樣式，但我能做的很少。如此多的元素都有相同的類名，似乎沒有唯一的方法來標識每個元素并對其進行樣式化。