How to define CSS fields based on props in a Svelte component?

Question

I new to Svelte and interesting to conditional styling based on props. I have two Svelte components - Parent and Child, just for understanding.

The parent passes props to child - the pt property which should be the padding-top field of child's css. The Parent code looks like:

<script>
  import Child from "./Child.svelte";
</script>

<Child pt="45px" />

The Child component has two styles: padding-top and padding-bottom. Depending on what props are passed, the corresponding fields of styles are created. If no props is passed, then the component will have no styles. In the following example, we passed only the pt props which activates padding-top field:

<script>
  export let pb, pt;
  let styles = "";
  if (pt) styles += "--pt:" + pt;
  if (pb) styles += "--pb:" + pb;
</script>

<div class="child" style={styles}>
  <h3>Hello</h3>
</div>

<style>
  .child {
    padding-top: var(--pt);
    padding-bottom: var(--pb);
  }
</style>

Everything works, but is this the right way? Or is there a more effective implementation of this task? Thanks for attension.

Bob Fanger · Accepted Answer · 2023-01-02 23:08:16Z

6

Svelte has a built-in way to pass CSS variables to a component through what's called:
--style-props

<Child --pt="45px" />

This sets the css value of var(--pt) to 45px

edited Jan 2, 2023 at 23:08

answered Jan 1, 2023 at 11:20

Bob Fanger

30k7 gold badges68 silver badges83 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

brunnerh Over a year ago

(This also creates a wrapper element which can mess up layout.)

Bob Fanger Over a year ago

True, but caniuse.com/css-display-contents support is quite good (as long as you don't use IE11 )

Leftium · Accepted Answer · 2023-01-01 18:07:38Z

6

<script>
  export let pb, pt;
</script>

<div class="child" style:padding-top={pt} style:padding-bottom={pb}>
  <h3>Hello</h3>
</div>

More info:

answered Jan 1, 2023 at 18:07

Leftium

18k6 gold badges73 silver badges110 bronze badges

Comments

brunnerh · Accepted Answer · 2023-01-01 11:38:07Z

2

Personally, I try to avoid specific styling properties and use utility classes for layout.

If a component may need styles or classes, properties can be exposed with empty default ''.

<script>
    export let style = '';
    let className = '';
    export { className as class }; // Necessary because `class` is a keyword
</script>

<div class={className} {style}>
    ...
</div>

Then utility classes, either from something like Tailwind or self-made, can be applied for layout, e.g.:

<Child class="pt32" />

answered Jan 1, 2023 at 11:38

brunnerh

188k30 gold badges362 silver badges434 bronze badges

2 Comments

Bob Fanger Over a year ago

(This disables svelte's detection to see which classes written in the <style> block are unused)

brunnerh Over a year ago

True, there are always some trade-offs 😅

Collectives™ on Stack Overflow

How to define CSS fields based on props in a Svelte component?

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related