shinokada / svelte-5-ui-lib

A UI library crafted for Svelte 5: Runes
https://svelte-5-ui-lib.codewithshin.com
MIT License
95 stars 9 forks source link

The `class` attribute appears to do nothing #14

Open rmunn opened 1 month ago

rmunn commented 1 month ago

Describe the bug

I was experimenting with adding CSS to the Table component, to see if I could pass in styles from my component that has a table in it. I put the following in my <style> section to make it obvious if the style had been applied:

.my-component :global(.foo) {
  border: 4px solid red;
}

I then wrote <Table class="foo">...</Table> and no red border appeared; inspecting the HTML showed there was no "foo" class listed on the <table> element or any of its children.

Changing class to divClass worked: a <div class="foo"> was wrapped around the <table>, which displayed a thick red border so I knew my test was successful. But the class attribute on the Table component had no effect, where I had been expecting it to add the chosen class(es) to the <table> element.

I have not yet tried with other components in svelte-5-ui-lib, but I'm guessing they would show similar behavior.

Reproduction

<div class="my-component">
<Table class="foo">
...
</Table>
</div>

<style>
  .my-component :global(.foo) {
    border: 4px solid red;
  }
</style>

Note: the browser I use is actually Firefox 129; I have no idea why npx envinfo below didn't pick up Firefox and only sees Chromium. But all browsers will behave the same way with this particular issue, since it's a matter of the string "foo" not being added to the class attribute of the element. (Indeed, I tested with Chromium and had the same results).

Version and System Info

System:
    OS: Linux 6.8 Linux Mint 22 (Wilma)
    CPU: (12) x64 Intel(R) Core(TM) i7-8850H CPU @ 2.60GHz
    Memory: 8.50 GB / 62.56 GB
    Container: Yes
    Shell: 5.2.21 - /bin/bash
  Binaries:
    Node: 22.2.0 - ~/.nvm/versions/node/v22.2.0/bin/node
    Yarn: 1.22.22 - ~/.nvm/versions/node/v22.2.0/bin/yarn
    npm: 10.7.0 - ~/.nvm/versions/node/v22.2.0/bin/npm
  Browsers:
    Chromium: 128.0.6613.84
  npmPackages:
    @sveltejs/kit: ^2.5.25 => 2.5.25 
    svelte: 5.0.0-next.241 => 5.0.0-next.241 
    svelte-5-ui-lib: ^0.9.5 => 0.9.5 
    vite: ^5.4.3 => 5.4.3
shinokada commented 1 month ago

You need to use tailwind css and prop divClass:

<Table divClass='border border-red-700'>
// more lines