Tengo un componente con estilo que está extendiendo un componente de terceros:
import Resizable from 're-resizable'; ... const ResizableSC = styled(Resizable)``; export const StyledPaneContainer = ResizableSC.extend` flex: 0 0 ${(props) => props.someProp}px; `; const PaneContainer = ({ children, someProp }) => ( <StyledPaneContainer someProp={someProp} > {children} </StyledPaneContainer> ); export default PaneContainer;Esto resultó en el siguiente error en la consola del navegador:
Advertencia: React no reconoce el accesorio
somePropen un elemento DOM. Si intencionalmente desea que aparezca en el DOM como un atributo personalizado, escríbalo en minúsculassomePropen su lugar. Si lo pasó accidentalmente desde un componente principal, elimínelo del elemento DOM
Entonces, cambié la propiedad para que tenga un nombre de atributo data-* :
import Resizable from 're-resizable'; ... const ResizableSC = styled(Resizable)``; export const StyledPaneContainer = ResizableSC.extend` flex: 0 0 ${(props) => props['data-s']}px; `; const PaneContainer = ({ children, someProp }) => ( <StyledPaneContainer data-s={someProp} > {children} </StyledPaneContainer> ); export default PaneContainer;Esto funciona, pero me preguntaba si había una forma nativa de usar accesorios en el componente con estilo sin que se transmitieran al elemento DOM (?)
Con la versión 5.1.0 puede usar accesorios transitorios . De esta manera, no necesita un envoltorio adicional, es decir, se reduce el código innecesario:
Los accesorios transitorios son un nuevo patrón para pasar accesorios que son consumidos explícitamente solo por componentes con estilo y no están destinados a pasarse a capas de componentes más profundas. Así es como los usas:
const Comp = styled.div` color: ${props => props.$fg || 'black'}; `; render(<Comp $fg="red">I'm red!</Comp>);Tenga en cuenta el prefijo del signo de dólar ($) en el apoyo; esto lo marca como transitorio y los componentes con estilo saben que no deben agregarlo al elemento DOM representado ni pasarlo más abajo en la jerarquía de componentes.
componente con estilo:
const ResizableSC = styled(Resizable)``; export const StyledPaneContainer = ResizableSC.extend` flex: 0 0 ${(props) => props.$someProp}px; `;componente principal:
const PaneContainer = ({ children, someProp }) => ( <StyledPaneContainer $someProp={someProp} // '$' signals the transient prop > {children} </StyledPaneContainer> );Como sugirió vdanchenkov en este problema de github de componentes con estilo , puede desestructurar los accesorios y solo pasar los relevantes a Resizable
const ResizableSC = styled(({ someProp, ...rest }) => <Resizable {...rest} />)` flex: 0 0 ${(props) => props.someProp}px; `;Para aquellos (como yo) que aterrizaron aquí debido a un problema con SC y Link de react-router.
Esta es básicamente la misma respuesta que @tskjetne, pero con estilo de sintaxis JS.
const StyledLink = styled(({ isCurrent, ...rest }) => <Link {...rest} />)( ({ isCurrent }) => ({ borderBottomColor: isCurrent ? 'green' : 'transparent', }), )