StyledKit is an innovative library designed specifically to make working with styled-components easier.
It provides convenient tools and features that allow developers to add modifiers to components quickly and efficiently, greatly speeding up the styling process.
@styled-kit/mods - allows you to write modifiers for Styled Components and with autocomplete. As well as automatically generate for them typing.
export const StyledComponent = styled.div<Mod<'size'>>`
${mods.size.small`
font-size: 14px;
`};
${mods('size', 'small')`
font-size: 14px;
`};
`;And many other options.