Comments (5)
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" ... />
from attractions.
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" />
from attractions.
If I place the style code inside the global.scss instead of inline into my component it works though. Any ideas?
from attractions.
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.
from attractions.
Perfect! It works this way, thank you very much!
from attractions.
Related Issues (20)
- Font is missing HOT 7
- How to use custom fonts for e.g. FormFields? HOT 4
- Add Advanced Documentation for the AccordionSection Element HOT 2
- SvelteKit support HOT 4
- :global() isn't processed in SvelteKit, some styles aren't applied HOT 7
- Up and running HOT 3
- chip-group.scss has an invalid selector :global HOT 3
- Custom table header / table items content? HOT 3
- kebab case for custom elements HOT 5
- Install can't trace down stylesheets HOT 6
- Is illright.me down? (Attractions main documentation source) HOT 2
- CSS media breakpoints support? HOT 1
- svelte-preprocess 5 is available HOT 3
- There are links to broken doc site pages HOT 1
- Input value disappears on drag&drop HOT 8
- Vite HOT 6
- Docs HOT 1
- DatePicker shows different month than the selected on specific dates HOT 3
- Button Ripple performance HOT 1
- Slider produces errors on mobile devices HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from attractions.