Change color of FluentListbox item

[parsalotfy]

I need to change the color of fluentlist options and I do it like this:

<FluentListbox TOption="object" Items="(IEnumerable<object>)Items" OptionText="GetOptionText"
               @onclick="ToggleComplexItem" @bind-SelectedOption="_selectedItem">
    <OptionTemplate>
        <div style="background-color:@(GetItemColor());width:100%; height:100%;">
            @GetOptionText(context)
        </div>
    </OptionTemplate>
</FluentListbox>

and it looks like this:

I have nested components, so I couldn't manage to use <style> section, or css file. because it changes the color of all other list boxes in nested components.
so I had to use inline styling. however, it doesn't look good since the colored part doesn't cover the full space of item.
Is there any solution?

[dvoituron]

Your code is correct, but the following “item container” needs to be adapted to increase the width...

fluent-option::part(content) {
    width: 100%;
}

[parsalotfy]

thanks, it works.