How do I prevent stylesheets imported for svelte carbon components to be applied globally?

Question

I want to use the DatePicker from carbon-components-svelte, unfortunately, the styles from carbon-components are applied globally and some of my own styles break.

According to carbon-components-svelte documentation "you can reduce the size of the bundle CSS by importing individual component styles", whereupon they refer to this guide.

I thought that importing just the DatePicker SCSS styles would be the solution (since the styles are fewer and hopefully only affects the styling in the datepicker component). However, in my node_modules folder I don't have a SCSS folder, hence, trying to import the individual DatePicker style sheet does not work.

1. How do I use the individual component's SCSS stylesheets with carbon components for svelte?
2. Is there any other way to prevent the stylesheet from being applied globally?

Answer 1

You have to add the package carbon-components. carbon-components-svelte only contains bundled styles. Make sure the versions match (right now the Svelte components are built on version 10 of the base package, see its package.json).

If you import the styles of individual components, there should not be conflicts as all components are prefixed.

See the time picker SCSS file:

// ...
@mixin time-picker {
  .#{$prefix}--time-picker {
    display: flex;
    align-items: flex-end;
  }

  .#{$prefix}--time-picker__select {
    justify-content: center;

    &:not(:last-of-type) {
      margin: 0 $carbon--spacing-01;
    }
  }

  // ...

(You probably cannot change the prefix, since the Svelte package is compiled with a fixed prefix of bx.)