How to override overflow-x style of the main Highlight div

[Xharos]

I have this custom class :

.highlight-container {
  display: inline-block;
  overflow-x: auto;
  width: 100%;
}

.highlight-container::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

.highlight-container::-webkit-scrollbar-thumb {
  background-color: $secondary;
  border-radius: 5px;
}

.highlight-container::-webkit-scrollbar-track {
  background-color: $tertiary;
  border-radius: 5px;
}

That I use for different div inside my project.

But I don't know how to apply this style to the highlight component.

I've tried to wrap it:

<div class="highlight-container">
    <Highlight {code} {language} let:highlighted>
        <LineNumbers hideBorder={false} {highlighted}/>
    </Highlight>
</div>

<style>
    .highlight-container {
        display: inline-block;
        overflow-x: auto;
        width: 100%;
    }

    .highlight-container::-webkit-scrollbar {
        width: 5px;
        height: 5px;
    }

    .highlight-container::-webkit-scrollbar-thumb {
        background-color: red;
        border-radius: 5px;
    }

    .highlight-container::-webkit-scrollbar-track {
        background-color: green;
        border-radius: 5px;
    }
</style>

Or to add a custom class :

<Highlight {code} {language} let:highlighted class="highlight-container">
    <LineNumbers hideBorder={false} {highlighted}/>
</Highlight>

I keep getting the default scroll bar when everywhere else I got the custom one.

Do you know how to fix this behaviour?

Thanks in advance

[metonym]

Hi there. Could you try passing the "highlight-container" class name to the LineNumbers component?

<Highlight {code} {language} let:highlighted>
    <LineNumbers hideBorder={false} {highlighted}  class="highlight-container" />
</Highlight>

When LineNumbers is used, it's responsible for rendering the actual markup, including $$restProps such as class.

[Xharos]

I would try it. I'll let you know if it works. I hadn't thought of this solution.

[Xharos]

It did solve the issue.

Thanks :)