Estoy tratando de averiguar algo con nuestra aplicación Styled Component. Para el contexto, creamos una aplicación que vivirá dentro de un sitio web que ya tiene su propia hoja de estilo global. El problema es que, cuando conectamos la aplicación dentro del sitio web, gran parte de nuestro estilo generado es anulado por la hoja de estilo global, que usa una clase principal para envolver algunos elementos.

HTML generado

 <div class="PARENT_CLASS"> <div id="PARENT_ID"> <div id="MY_APP"> <div class="sc-gtsrHT ddDIoa test-wrapper"> <a href="/">Click me</a> </div> </div> </div> </div>

CSS generado

 /* WEBSITE STYLE */ .PARENT_CLASS #PARENT_ID a { color: #0ae; } /* SC GENERATED */ .ddDIoa a { color: red; }

Reaccionar Javascript

 const TestWrapper = styled.div` a { color: red; } `; const A = styled.a` color: red; `; const Content = () => ( <TestWrapper className="test-wrapper"> <A href="/">Click me</A> </TestWrapper> );

¿Hay alguna forma de anteponer las clases estáticas (.PARENT_CLASS #PARENT_ID) a todas las clases generadas por Styled Component sin tener que hacerlo en cada Componente que creo?

Gracias