Tengo un componente con un botón. Tiene una clase predeterminada y una clase que se le pasa desde los accesorios. Pero a veces la clase predeterminada sobrescribe la clase de los accesorios. ¿Es posible aumentar la especificidad de la clase a partir de los accesorios o reducir la especificidad de la clase predeterminada?
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> ) }No puedo encontrar una solución hermosa y conveniente. Ahora estoy agregando !importante en una clase de accesorios. Solo espero que haya algún truco css o js del que no esté al tanto.
Cualquier selector adicional aumentará la prioridad del nombre de clase pasado
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} /> }No se pudo encontrar la solución ideal. Decidí no reinventar la rueda y escribir un kit de interfaz de usuario para el proyecto, como todos los demás. Los estilos del kit de interfaz de usuario se conectan antes, por lo que los estilos de los padres los reescribirán sin !importante y sin aumentar la especificidad.