Closed techpet closed 2 years ago
Due to the way Svelte scopes its styles, you have to specifically opt out of scoping for your styles to reach the components of Attractions. Try the following:
<style lang="scss">
-.my-table {
+.my-table :global {
td {
border:none;
}
}
</style>
<Table class="my-table" ... />
Unfortunately that doesn't work either in my component...
Full code here:
<script lang="ts">
import {Table} from 'attractions';
const headers = [
{ text: 'First Name', value: 'firstName' },
{ text: 'Last Name', value: 'lastName' },
{ text: 'Age', value: 'age', align: 'end' },
];
const items = [
{ firstName: 'John', lastName: 'Doe', age: 694 },
{ firstName: 'Leo', lastName: 'Tolstoy', age: new Date().getFullYear() - 1828 },
{ firstName: 'فلان', lastName: 'الفلاني', age: 42 },
{ firstName: 'Иван', lastName: 'Иванов', age: 69 },
];
</script>
<style lang="scss">
.my-table :global {
td {
border:none;
}
}
</style>
<Table {headers} {items} alternatingRows={false} class="my-table" />
and the result:
If I place the style code inside the global.scss instead of inline into my component it works though. Any ideas?
Oh, wait, sorry, I misled you there a bit. The :global
modifier should be placed before .my-table
, not after. However, to preserve scoping, you would need to add some scoped selector in the beginning, for example:
<script lang="ts">
import { Table } from 'attractions';
const headers = [
{ text: 'First Name', value: 'firstName' },
{ text: 'Last Name', value: 'lastName' },
{ text: 'Age', value: 'age', align: 'end' },
];
const items = [
{ firstName: 'John', lastName: 'Doe', age: 694 },
{ firstName: 'Leo', lastName: 'Tolstoy', age: new Date().getFullYear() - 1828 },
{ firstName: 'فلان', lastName: 'الفلاني', age: 42 },
{ firstName: 'Иван', lastName: 'Иванов', age: 69 },
];
</script>
<style lang="scss">
.something-local :global .my-table {
td {
border: none !important;
}
}
</style>
<div class="something-local">
<Table {headers} {items} alternatingRows={false} class="my-table" />
</div>
Note the usage of !important
. That's another problem to overcome – specificity. If you have a more specific selector, you can avoid !important
, but if not, that should stay.
Perfect! It works this way, thank you very much!
What is the best way to change the styles of the table internal elements? For example change the
thead
background-color or remove the border fromtd
?I've tried overriding them with:
and
but neither works.