I have a Suggest component that is rendered out like this:
<div class="bp4-popover-content">
<div>
<ul class="b4-menu">
<li>
<a>
<div class="bp4-fill bp4-text-overflow-ellipsis">
<div>Some text</div>
</div>
</a>
</li>
</ul>
</div>
</div>
By default, it uses text-overflow ellipsis, but i want to switch it to bp4-text-overflow-wrap
. How can I achieve this in React? What I have so far:
const ItemSelect = Suggest.ofType<Items>();
<ItemSelect
fill
items={newUserItems}
itemListPredicate={filterItems}
itemRenderer={renderItem}
noResults={<MenuItem disabled={true} text="No results." />}
onItemSelect={(item, event) => {
setQuery(item.name);
item.isNew = false;
onItemSelect(item);
}}
popoverProps={{
minimal: true,
popoverClassName: `custom-class ${
isOpenLine ? "open-line-popover" : "non-open-line-popover"
}`,
}}
inputValueRenderer={() => query}
resetOnSelect={true}
resetOnQuery={true}
onQueryChange={(q, event) => {
if (event === undefined) {
setQuery(q);
}
}}
query={query}
inputProps={{ inputRef: inputRef }}
/>