0
190
Vistas¿Cómo anular los estilos de React Component con componentes con estilo?
Tengo un componente React <DiscoverButton> que tiene algunos estilos y hace algo cuando se hace clic. Estoy usando componentes con estilo para diseñar por cierto. Necesito crear un componente React <ReturnButton> que será casi idéntico, la única diferencia es el ancho.
Esto es lo que estoy tratando de hacer, pero no logro lo que quiero:
DiscoverButton.tsx
export const BigButton = styled.button` width: 100%; height: 3.5rem; background-color: var(--lighter-black); border: none; border-radius: 0.4rem; color: var(--cultured-white); transition: background-color 0.7s, color 0.7s; &:hover { background-color: transparent; border: 2px solid var(--lighter-black); color: var(--lighter-black); } `; export const DiscoverButton: React.FC<Props> = ({ children, ...props }) => { return ( <BigButton onClick={() => // do smth with props > {children} </BigButton> ); }; Y aquí es donde lucho: ReturnButton.tsx :
const ReturnButtonStyled = styled(DiscoverButton)` width: 7%; `; export const ReturnButton: React.FC<Props> = ({ children, ...props }) => { return ( <ReturnButtonStyled id={props.id} btnTitle={props.btnTitle}> {children} </ReturnButtonStyled> );
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Debe pasar la propiedad className al componente con estilo representado.
export const DiscoverButton: React.FC<Props> = ({ children, className, ...props }) => { return ( <BigButton className={className} onClick={() => // do smth with props > {children} </BigButton> ); }; 
Actualizar
Al definir un componente, deberá marcar
classNamecomo opcional en su interfaz Props
interface Props { .... other prop types .... /* This prop is optional, since TypeScript won't know that it's passed by the wrapper */ className?: string, .... other prop types .... }Tampoco es necesario que escriba sus componentes funcionales de tal manera que pase manualmente los accesorios extraños a los componentes con estilo.
Ejemplo:
interface Props { btnTitle?: string, children: any, className?: string, id?: string, onClick: React.MouseEventHandler<HTMLButtonElement>, } const BigButton = styled.button` .... base styles .... `; const DiscoverButton: React.FC<Props> = ({ children, className, onClick }) => ( <BigButton className={className} onClick={(...args) => { console.log("Did something with the props"); onClick(...args); }} > {children} </BigButton> ); const ReturnButton: React.FC<Props> = styled(DiscoverButton)` width: 7%; `;
·
Juan Pablo Isaza
Denunciar
Responde la pregunta