Buttons in ButtonGroup don't correctly connect

[microdou]

Issue:

Buttons in ButtonGroup don't correctly connect.

Screenshot:

How to Reproduce:

https://github.com/microdou/svelte-test/tree/svelte-materialify-buttongroup

git clone -b svelte-materialify-buttongroup https://github.com/microdou/svelte-test
cd svelte-test
npm i
npm run dev

# Then open up browser at http://localhost:5000

Browsers:

The issue exists on both Firefox & Chrome.

[betaboon]

my initial research: this seems to be due to both .s-btn and .s-btn-group-item applying to the elements and sometimes .s-btn takes precedence (most likely due to ordering in the final css-file).

workaround:

:global(.s-btn-group-item) {
  border-radius: 0 !important;
}
:global(.s-btn-group-item:first-child) {
  border-top-left-radius: inherit !important;
  border-bottom-left-radius: inherit !important;
}
:global(.s-btn-group-item:last-child) {
  border-top-right-radius: inherit !important;
  border-bottom-right-radius: inherit !important;
}