How to remove the underline of the heading?

[JorSoi]

Hey, this is more of a general question but it drives me crazy since I have alreaedy spent a couple of hours trying to move the bottom sheet styles to one of my own scss files. Example: I want to take care of the whole bottom sheet styling in ./components/BottomSheet/BottomSheet.module.scss.

Removing the underline of the sticky heading block is just one example which I'm trying to tackle. The documentation only gives us these styling options:

:root {
  --rsbs-backdrop-bg: rgba(0, 0, 0, 0.6);
  --rsbs-bg: #fff;
  --rsbs-handle-bg: hsla(0, 0%, 0%, 0.14);
  --rsbs-max-w: auto;
  --rsbs-ml: env(safe-area-inset-left);
  --rsbs-mr: env(safe-area-inset-right);
  --rsbs-overlay-rounded: 16px;
}

There is also another section talking about custom css using pstcss or something like that. The problem here is that there is no further explanation and I'm just too junior to understand what they want me to do.

One thing I tried is to copy paste the stylings to my own scss file and using the className attribute to target the styles but it didnt work at all:

...
<BottomSheet
    className={styles.bottomSheet} 
    open={true} 
    header={
        <p>Heading 123</p>
    }>
    <p>Lorem Ipsum</p>
</BottomSheet>
...


//Styles
.bottomSheet {
   &[data-rsbs-overlay] {
       border-top-left-radius: var(--rsbs-overlay-rounded);
       border-top-right-radius: var(--rsbs-overlay-rounded);
       display: flex;
       background: var(--rsbs-bg);
       flex-direction: column;
       height: var(--rsbs-overlay-h);
       transform: translate3d(0, var(--rsbs-overlay-translate-y), 0);
       will-change: height;
     }
   &[data-rsbs-overlay]:focus {
       outline: none;
  }
...

Do you have any ideas/suggestions how I can use my own stylings for the React-Spring-Bottom-Sheet?