How do I configure to allow easy overriding of component library CSS in my project?

[zedlauzy]

I have created a React Component library for the first time that uses Rollup & sass and each component has its own style defined in the library. I want to consume the library in a project and overrides some of the styles set in the library. I have tried inject which requires me to use !important for every css overriding which I am not really fond of as the styles in the library takes precedence. Is there a way to configure it to make the styles to be at a level which can be overridden by project scss files easily?

I also tried extract but I only see it being extracted to assets and the library styles are not even included and I am not sure how I can use it?

Current setup:

styles()

Example of overriding css:

// In library
.button {
background-color: white;
border-radius: 2em;
}

// In project
.button {
background-color: black; // I want this to be precedence instead of the one above
}