Unable to apply custom badge style in production

[gorohoroh]

As suggested in the docs, I have created custom badge styles to use in my sidebar.

My Starlight config contains a reference to a custom CSS file:

            customCss: ['./src/styles/custom.css'],

The CSS file contains definitions for the 3 kinds of badges that I'm looking for:

.badge-red {
    height: 1em;
    width: 1em;
    border-radius: 50%;
    background-color: #da4d4d;
}

.badge-yellow {
    height: 1em;
    width: 1em;
    border-radius: 50%;
    background-color: #e5d85b;
}

.badge-green {
    height: 1em;
    width: 1em;
    border-radius: 50%;
    background-color: #87ee81;
}

Badges are referenced in the sidebar configuration like this:

                {
                    label: 'Why protect personal data?',
                    items: [
                        {slug: 'why-protect-personal-data/risks', badge: {text: "", class: "badge-yellow"}},
                    ],
                }

In development mode, the result is just what I expect it to be:

However, when building, I can see that both the border radius and the background color get overridden by Starlight's own styles:

Computed styles in dev tools are as follows:

What am I doing wrong? How can I prevent my styles from being overridden in production mode?

[HiDeoo]

Thanks for your feedback.

Using a selector with more specifity, e.g. .sl-badge.badge-yellow when defining the styles for the badge in your custom.css file should be a working workaround at the moment.

Ultimately, the issue should be fixed when Starlight migrates to Cascade Layers which is currently in the works. When this lands, your initial approach should work as expected and your custom styles should always have higher specificity than the default styles.

[gorohoroh]

Thanks for clarifying and providing the workaround. I can confirm that the workaround does the job.