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