V3 - how to style input and selected item wrapper?

[dontwork]

Hi the input and the wrapper about the Selection component seem to be prohibiting styling. Is there a specific way I should look to do this?

[rob-balfre]

containerStyles prop not enough?

[dontwork]

I don't think I can modify the default styles of the input or the various wrappers. For instances I am trying to make the select a bit small (less padding, less height, smaller font) but there are styles which set the height with no mechanism to override

[rob-balfre]

Yeah, it's not really possible at the moment without implementing CSS variables for most of the styles. You can always fork the repo and change the styles. Not ideal I know. I'll have a think.

[hbendev]

Couldn't just all styles be moved to Item, Selection, MultiSelection components, with some additional props (like SelectedValue for Item) passed down. That way if someone wanted to use custom styles, they would just define them in their own components.

I think the optimal solution would be this feature. Then these component-type props wouldn't be required at all. Works very well with UI libaries, like in React.

[subpx]

I made a PR a while ago that makes this a bit easier. #41 It’s for v2 though and still requires custom components.

[rob-balfre]

Maybe a combo of @subpx's PR and adding CSS vars would cater for most use-cases and not break Svelte's CSS optimisation?

[rob-balfre]

WIP... With great power comes great responsibility...

[rob-balfre]

@subpx @dontwork @hajnalbendeguz what you think of CSS var options in 2.1.0-beta.0?
Demo @ https://svelte.dev/repl/9a0c0ca1518346c9aa117d6f6b905fc9?version=3.6.2

[rob-balfre]

I've updated repl for Svelte 3.6.3+ changes
https://svelte.dev/repl/b4c6fa312e4b415ca3b154a2d4ad6ced?version=3.6.3