Tengo una hoja de estilo grande que estoy almacenando en una variable cleanSlateRules . Tengo un componente con estilo como contenedor principal de toda mi aplicación, es decir, export const StyledApplication = styled.main . Si importo cleanSlateRules en la parte superior de mi StyledApplication , esas reglas rompen la cascada y anulan mis propios estilos que tengo más adelante en la aplicación. Por ejemplo, si dentro de mi StyledApplication devuelvo un elemento de botón con un fondo verde, el botón aún tendrá el estilo predeterminado del navegador si mantengo cleanSlateRules en la parte superior de mis estilos de StyledApplication .
Quiero evitar el uso de createGlobalStyles porque estoy creando un widget integrable y, por lo tanto, no quiero establecer estilos en la página <head> .
He intentado lo siguiente:
import {cleanSlateRules} from "./cleanSlateRules.ts" export const StyledApplication = styled.main` ${cleanSlateRules} // other styles... ` y también un método que puede usar createGlobalStyles de manera un poco más segura, pero tiene exactamente el mismo efecto:
export const GlobalStyles = createGlobalStyle` .my-specific-widget { ${cleanSlateRules} } `; ¿Qué puedo hacer para usar componentes con estilo y reiniciar mi pizarra limpia, pero asegurarme de que esos estilos tengan una especificidad más baja que los estilos reales que quiero para mis componentes reales? Por ahora estoy golpeando !important en todo.