I'm facing a challenge finding a solution to a basic issue. I have a component that is initially styled using a class from a *.module.css file. However, I want to replace this style with one from a global stylesheet or another stylesheet but I can't seem to make it work.
The reason for this dilemma is because I am developing a custom UI library for others to utilize. Users will only need to download HelloWorld.tsx and HelloWorld.module.css (which provides a default background style). They should be able to override the background by applying their own class when using the component. So, I'm trying to figure out the best approach to achieve this.
Take a look at the example below:
// HelloWorld.tsx
import styles from './HelloWorld.module.css'
export default function HelloWorld({className}) {
return <div className={`${styles.Container} ${className}`}>Hello world</div>;
}
/* HelloWorld.module.css */
.Container {
background-color: green; /* default component style to be overridden by users */
}
/* global.css */
.danger-container {
background-color: red;
}
Now, I want to use the component like this:
<HelloWorld className='danger-container' />
Unfortunately, the local style is not being overridden and the container remains green.
I've been resorting to using !important as a last resort, but I've been advised against it as bad practice. I'd prefer if users of the library didn't have to rely on !important to override my default styles.
Please help me determine the best way to address this issue.
Thank you in advance.