How do you apply small customisations to your styled components?

[andorthehood]

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".

[quantizor]

Both approaches shown in the thread are valid:

1. Extend with styled() for context-specific overrides:

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

2. Use the css prop or pass a className for one-off tweaks without creating a new component.

3. Use .attrs() to set default props contextually.

The styled() extension pattern (option 1) is the idiomatic approach for context-specific modifications in styled-components.