Tengo un BaseComponent en un archivo, que se compone de varios otros componentes y estoy exportando ese componente. El nivel más alto de BaseComponent tiene un contenedor que es responsable del margen. Cuando lo exporto e intento sobrescribir algunos de los estilos con
//other file const BaseComponentWrapper = styled.div` margin: 10px ` const export BaseComponent = () => { return ( <BaseComponentWrapper> Some other stuff in the middle </ BaseComponentWrapper > } import { BaseComponent } from otherfile const ModifiedBaseComponent = styled(BaseComponent)` margin: 0 px; ` El margen no cambia a 0px para mi ModifiedBaseComponent .
La única forma en que he podido cambiar el margen es tomar la clase producida por los componentes con estilo del navegador y conectarla debajo del contenedor css, por ejemplo.
const BaseComponentWrapper { .etbykw { margin: 0px; } }Por lo que sé, al menos este código a continuación debería funcionar, pero tampoco lo hace
const BaseComponentWrapper { > ${ModifiedBaseComponent} { margin: 0px; } }Por lo que he visto en otras preguntas, hay algo sobre un accesorio className que podría ser útil, pero no puedo entender esto. Sé que es un problema de especificidad de algún tipo, pero realmente estoy luchando por comprenderlo completamente y el código que funciona no es muy legible para una parte externa.
Para diseñar un componente común, debe pasar la propiedad className.
En el siguiente ejemplo, BaseComponent toma un className y lo pasa a BaseComponentWrapper.
Ahora puede diseñar su BaseComponent.
Documentos: https://styled-components.com/docs/advanced#styling-normal-react-components
const BaseComponentWrapper = styled.div` margin: 10px; `; export const BaseComponent = ({ className, children }) => { return ( <BaseComponentWrapper className={className}> {children} </BaseComponentWrapper> ); };