1

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?
A.G
  • 13
  • 4

1 Answers1

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.)

H.B.
  • 166,899
  • 29
  • 327
  • 400
  • Thank you so much! However, it does not solve the problem completely. When importing the component's scss stylesheet, the styles are not applied at all. I tried importing it in the style tags in the svelte component and also from a separate SCSS stylesheet. – A.G Sep 30 '22 at 13:30
  • If you use it in a component you have to make sure to apply [`:global`](https://svelte.dev/docs#component-format-style), otherwise the compiled style will be scoped and simply cannot apply to the Carbon components. Check whether the `$prefix` is set correctly to `bx`, the default might be different. Also: Get version 10 of the `carbon-components` package, because the Svelte package is built on that version. – H.B. Sep 30 '22 at 15:03
  • Thanks for your reply! Is there a workaround to import the styles for datePicker without using the :global modifier? I don't want the styles to be applied globally, it breaks other styles in the application. ( The $prefix is set to bx, the carbon-components version is 10.58.1.) – A.G Oct 03 '22 at 07:57
  • You can try to wrap the component in a component of your own, then you can add a container and scope all the styles to the container, by adding a rule like this: `.container :global { ... }`, where the Carbon styles are inserted inside the rule. This probably requires use of [`svelte-preprocess`](https://github.com/sveltejs/svelte-preprocess) and I am not completely certain that there is Sass syntax to support this, as I have not used it much. – H.B. Oct 03 '22 at 12:24