Customizing Components

Customizing single component

Pass the component that you want to customize to the styled constructor from styled-components.

Editable Code

const CustomButton = styled(Button)`
    background-color: hsl(25,65%,65%);
    &:hover{
        background-color: hsl(25,60%,60%);
    }
`;

render(<CustomButton>Custom Button</CustomButton>);

const CustomButton = styled(Button)`
    background-color: hsl(25,65%,65%);
    &:hover{
        background-color: hsl(25,60%,60%);
    }
`;

render(<CustomButton>Custom Button</CustomButton>);

Customizing multiple components within a page

Pass the Container component to the styled constructor from styled-components and use class names to style all the components within the Container.

Welcome to Home page

Editable Code

const HomeStyled = styled(Container)`
    .text{
        text-transform: uppercase;
    }
    .btn{
        background-color: hsl(25,65%,65%);
        padding: 0.25rem;
    }
    .btn:hover{
        background-color: hsl(25,60%,60%);
    }
`;

const Home = () => {
    return (
        <HomeStyled type="col" width="100%" rowCenter>
            <Text className="text">Welcome to Home page</Text>
            <Button className="btn">Custom Button</Button>
        </HomeStyled>
    );
};

render(<Home />);

const HomeStyled = styled(Container)`
    .text{
        text-transform: uppercase;
    }
    .btn{
        background-color: hsl(25,65%,65%);
        padding: 0.25rem;
    }
    .btn:hover{
        background-color: hsl(25,60%,60%);
    }
`;

const Home = () => {
    return (
        <HomeStyled type="col" width="100%" rowCenter>
            <Text className="text">Welcome to Home page</Text>
            <Button className="btn">Custom Button</Button>
        </HomeStyled>
    );
};

render(<Home />);