[Svelte]: VisXYContainer doesn't allow for modification through the `style` prop.

[SHYAKA Davis]

Hi;

Don't know if I should call it a prop, but I can't modify some styles like --vis-tooltip-padding through the VisXYContainer component, because doing something like so:

<VisXYContainer
	style="'--vis-tooltip-padding': '0px',
            '--vis-tooltip-background-color': 'transparent',
            '--vis-tooltip-border-color': 'transparent',"
>

yields this error:

Object literal may only specify known properties, and '"style"' does not exist in type '{ class?: string | undefined; components?: XYComponentCore<Data, Partial<XYComponentConfigInterface<Data>>>[] | undefined; ... 26 more ...; data?: Data[] | undefined; }'.ts(2353)

Is this intended, or is it a mistake/bug.

Thanks.

[Nikita Rokotyan]

@shyakadavis We tested providing CSS variables via the style attribute only with React. Can you try defining them in a class instead?

[SHYAKA Davis]

Hello, @rokotyan

That's what I ended going with, that is, if you mean the :global(.my-class) way, but this is highly discouraged. For example, this is the warning currently flooding the logs:

[vite-plugin-svelte] /src/lib/components/docs/charts/metric.svelte:48:1 No scopable elements found in template. If you're using global styles in the style tag, you should move it into an external stylesheet file and import it in JS. See https://github.com/sveltejs/vite-plugin-svelte/blob/main/docs/faq.md#where-should-i-put-my-global-styles.

Doing the suggested way of moving them to a separate file never applies/overrides the styles.

We tested providing CSS variables via the style attribute only with React.

I also saw this in Vue.

May you please re-consider this? Thank you. 🙂

[Nikita Rokotyan]

@shyakadavis There's no need to use the :global selector, you can specify CSS variables locally.

It looks like our Svelte components don't support custom classes (we'll take a look into this), but you can still wrap them into a div and specify CSS variables on that level: