0
95
VistasPasar el estilo de niños a un componente con estilo
Estoy haciendo una versión generalizada de un componente con estilo para reemplazar el código duplicado en mi base de código. El componente se parece a esto:
const CustomDiv = styled.div` display:flex; b { padding-right:5px } `; const DivWrapper = ({style, children}) => { return ( <CustomDiv style={style}> {children} </CustomDiv> ); };Quiero usar este "DivWrapper" en otros lugares de la base del código, pero poder cambiar el relleno b en otros lugares cuando lo uso. Intenté extenderlo así:
const SuperCustomDiv = styled(CustomDiv)` b { padding-right:10px } `;Estoy usando la biblioteca de componentes con estilo para React.
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Puede lograr esto usando accesorios css y pasando accesorios del componente con estilo al CSS. Entonces, creamos CSS con estilo con alguna propiedad, luego este estilo coloca ambos componentes con estilo. Con props, pasaremos el valor al estilo principal.
import styled, { css } from "styled-components"; const PaddingStyle = (value) => css` padding-right: ${value}px; `; export const SuperCustomDiv = styled.b` ${PaddingStyle((props) => props.padding)} `; export const CustomDiv = styled.div` display: flex; b { ${PaddingStyle((props) => props.padding)} } `; export const DivWrapper = ({ padding = 50, children }) => { return ( <CustomDiv as="div" padding={padding}> <b>Name:</b> {children} </CustomDiv> ); }; export default function App() { return ( <div className="App"> <DivWrapper>John Doe</DivWrapper> <SuperCustomDiv padding={30}>Super</SuperCustomDiv> <span>John Smith</span> </div> ); } 
·
Juan Pablo Isaza
Denunciar
Responde la pregunta