我正在嘗試設(shè)計(jì)虛擬化自動完成組件的樣式。

下拉列表中的選項(xiàng)太長，請縮短...

在普通的Autocomplete組件上，我將popper組件作為目標(biāo)，并將其樣式化為width: max-content，然后允許下拉菜單顯示long選項(xiàng)。

但是由于虛擬化自動完成具有更復(fù)雜的組件結(jié)構(gòu)，將寬度設(shè)置為max-content會使選項(xiàng)消失，因?yàn)槿萜髡J(rèn)為那里沒有內(nèi)容。

如何設(shè)計(jì)虛擬化自動完成組件的樣式，使下拉框的寬度與其最長選項(xiàng)的寬度相同？

示例: https://codesandbox.io/s/nostalgic-feather-3ppi1h?file=/demo.js

我已經(jīng)將max-content添加到了renderRow inlineStyles中，因此您可以看到，您必須水平滾動才能看到選項(xiàng)的全名。