Change liSelectedClass background color for each option

[paul-brenner]

First of all, I'd like to express my appreciation for your kind words on the Svelte-multiselect project. Your support means a lot!

I understand you're trying to assign different background colors to each selected item in the Multiselect component. Unfortunately, the liSelectedClass prop isn't designed to directly take dynamic values like option.color. However, there might be a way to achieve the effect you're after.

You've already noticed that Svelte allows you to manipulate the components within the selected item. Building on this, we can use CSS-in-JS to dynamically style each selected item's background color.

Here's a conceptual example on how to do it:

<MultiSelect
	options={locationOptions}
	name="location"
	let:option
	{liSelectedClass}
>
	<div style="background-color: {option.color};">
		{option.label}
	</div>
</MultiSelect>

In this example, I've added a div inside the MultiSelect component, and used inline styles to dynamically set its background color to option.color. This should ensure each selected item has a different background color according to the color property of each option.

As for the showcase site you mentioned (https://openbook.fyi/), it's possible that they were working within the framework's capabilities and decided to use the default gray background color.

Please note that the provided code is a conceptual example. The actual code might need adjustments based on your exact scenario and requirements.

Finally, the image link you've shared seems to be incorrect or broken, as it leads to a 404 Not Found page. Please check the URL and share the correct one if necessary.

I hope this helps! If you have any further questions, please feel free to ask.

[janosh]

Thanks for bringing this up! You can pass --sms-selected-bg="blue"

<MultiSelect {options} --sms-selected-bg="blue"

to change the background color of all selected options at once but you're right there's currently no straighforward way to change the background on a per-option basis. Probably the easiest solution is to extend the type ObjectOption to have a style key that's used as inline CSS.