I have a component with a button. It has a default class and a class passed to its from the props. But sometimes the default class overwrites the class from the props. Is it possible to increase the specificity of the class from the props or lower the specificity of the default class?
import React from 'react'
import styles from './Button.module.scss'
import classNames from 'classnames'
const Button = ({ children, className, ...props }) => {
return (
<button {...props} className={classNames(styles.btn, className)}>
{children}
</button>
)
}
I can't find a beautiful and convenient solution. Now I'm adding !imortant in a class of props. I just hope there's some css or js trick I'm not aware of.
Any additional selector will be increase priority of passed classname
component.module.scss:
button.passed-class-name {
color: red;
}
button.module.scss:
.btn {
color: green
}
Component.js
import styles from './component.module.scss'
import { Button } from 'components/Button'
const Component = () => {
<Button className={styles.passedClassName} />
}
The ideal solution could not be found. I decided not to reinvent the wheel and write a UI kit for the project, like everyone else. UI kit styles are connected earlier, so styles from parents will rewrite them without !important and without increasing specificity.