[Svelte]: VisXYContainer doesn't allow for modification through the `style` prop.
shyakadavis opened this issue · comments
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.
@shyakadavis We tested providing CSS variables via the style
attribute only with React. Can you try defining them in a class instead?
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. 🙂
@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: