Use esta skill para estilização com styled-components em React/Next.js. Use quando criar componentes, páginas ou aplicar estilos.
Quando solicitado a estilizar ou criar componentes, siga estas regras:
styled.div, styled.button, etc.styled-components ThemeProvider para gerenciar cores, espaçamentos e tipografia.${props => props.primary ? 'blue' : 'gray'}).Container, StyledButton).Exemplo de saída esperada:
import styled from "styled-components";
const Button = styled.button`
background-color: ${(props) => props.theme.colors.primary};
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
&:hover {
background-color: ${(props) => props.theme.colors.primaryDark};
}
`;