How do you apply small customisations to your styled components?

[andormade]

I've taken over a project that uses a UI kit created with styled components. However, because of some design inconsistencies, there are times when these UI elements need small tweaks in certain situations. For example, the Button component might need specific spacing on certain pages, or the Text component might need a special margin on certain overlays. I wouldn't call these "variants" since they are not intended for generic, reusable customisations, rather, they are context-specific modifications.

Here's how these customisations are currently done:

const StyledCloseButton = styled(CloseButton)`
    margin-top: 20rem;
`;

const StyledStatusIndicator = styled(StatusIndicator)`
    padding: 2rem;
`;

const StyledToolTip = styled(ToolTip)`
    font-size: 8rem;
`;

The usual way is to add 'Styled' in front of the original component's name. This is often because it can be challenging to come up with unique names for these components. For example, you could name a component 'StyledStatusIndicatorWithPadding,' but that can look a bit silly.

I'm curious to know how do you handle these kinds of customisations. Any thoughts or experiences?

[MicroMichaelIE]

Just an idea but you could use the syntax from a library such as Tailwind? In this case

const StyledCloseButtonMt80 = styled(CloseButton)`
    margin-top: 20rem;
`;

Mt-80 being Tailwind for "margin-top: 20rem;", in this case. This way you have outsource the source of truth where you can always reference it for nomenclature.

Thoughts?

[dfiedlerx]

There are two main ways. You can extend the component with the following modifications:

const changedComponent = styled(Component)`
        color: #F00;
`

<ChangedComponent />

The second is to use properties that will control whether it will be personalized or not. Ex:

const Component = styled.div`
        color: ${props => props.$color};
`

<Component $color="#F00" />

The difference between the two is that the first will always generate a component with the same characteristics. The second allows you to generate more dynamic components, in addition to not duplicating the same component in two instances, "Component" and "ChangedComponent".