Tengo un componente React diseñado con componentes con estilo, pero ¿se puede volver a aplicar el estilo? Mi botón es un componente de reacción.
import Button from "./Button";
Luego, en otro lugar, agrego margin-top, no aplica el estilo.
//margin-top has no effect? const ButtonStyled = styled(Button)` margin-top: 100px; `; export default function App() { return <ButtonStyled>My button</ButtonStyled>; }
Demostración aquí https://codesandbox.io/s/goofy-montalcini-l47kp?file=/src/App.js:144-150
Para que la función con styled
funcione, el componente debe aceptar una propiedad className
. Ahora, cuando defines Button
:
const Button = ({ children }, props) => { return <ButtonStyled {...props}>{children}</ButtonStyled>; };
Intenta difundir los accesorios a ButtonStyled
, lo cual es bueno, simplemente escribió mal el lugar de los props
. Prueba esto:
const Button = ({ children, ...props }) => { return <ButtonStyled {...props}>{children}</ButtonStyled>; };
De esta forma, la propiedad className
(que se aplica con styled()
) se pasará a StyledButton
.
He visto dos opciones para anular el css.
import styled, { css } from "styled-components"; const ButtonStyled = styled.button` ${(props) => { return css` margin-top: 10px; width: 200px; padding: 16px 0; border: 1px solid; color: black; font-size: 16px; font-weight: 900; border-radius: 5px; ${props.newStyled} `; }} `; const Button = ({ children, ...props }) => { return <ButtonStyled {...props}>{children}</ButtonStyled>; }; // OPTION 1: WRAPPER THE COMPONENT function Question7_option1() { const DivStyled = styled.div` button { margin-top: 100px; } `; return (<DivStyled> <Button>Button</Button> </DivStyled>); } // OPTION 2: NEW STYLES THROUGH PROPS function Question7_option2() { const newStyled = css` margin-top: 100px; `; return (<Button newStyled={newStyled}>Button</Button>); } export default Question7_option2;
espero haberte ayudado