How to write repetitive styled components in a cleaner way

Question

I'm using Styled Components for styling and there are many icons defined in the project so in the style file we have this code:

my-component.styles.ts

import { ReactComponent as CloseIcon } from 'svg/close.svg'; import { ReactComponent as OpenIcon } from 'svg/open.svg'; import { ReactComponent as DeleteIcon } from 'svg/delete.svg'; import { ReactComponent as CheckIcon } from 'svg/check.svg'; ... export const StyledCloseIcon = styled(CloseIcon)` width: 20px; fill: white; `; export const StyledOpenIcon = styled(OpenIcon)` width: 20px; fill: white; `; export const StyledDeleteIcon = styled(DeleteIcon)` width: 20px; fill: white; `; export const StyledCheckIcon = styled(CheckIcon)` width: 20px; fill: white; `; ...

As it can be seen above, all icons are using the same styling.

And in another component they are used:

import { StyledCloseIcon, StyledOpenIcon, StyledDeleteIcon, StyledCheckIcon } from './my-component.styles';

and then: <StyledCloseIcon />

Is there a way to write it in a shorter way?

Pslice · Accepted Answer · 2023-01-12 16:34:32Z

You can declare a new variable like "sameStyles"

const sameStyles = ` width: 20px; fill: white; `;

and pass it in as a template literal expression

export const StyledCloseIcon = styled(CloseIcon)` ${sameStyles} `; export const StyledOpenIcon = styled(OpenIcon)` ${sameStyles} `;

Janice Zhong · Accepted Answer · 2023-01-13 10:43:14Z

Passing the same style value to each different component is anti-pattern. See https://styled-components.com/docs/basics#extending-styles.

You are supposed to have a base component that has base styles. For example,

const Icon = ({ children }) => <div>{ children }</div>; const StyledIcon = styled(Icon)` width: 20px; fill: white; `; const DeleteIcon = <StyledIcon><DeleteIconSvg/><StyledIcon/>; export const StyledDeleteIcon = styled(DeleteIcon)`...`;

Stack Exchange Network

How to write repetitive styled components in a cleaner way

2 Answers 2

You must log in to answer this question.

Hot Network Questions

How to write repetitive styled components in a cleaner way

2 Answers 2

You must log in to answer this question.

Related

Hot Network Questions