Member-only story
Get readable CSS Classes in Emotion Component/React
Oct 11, 2022
So you are working with styled components or Emotion Component and you are getting a bit frustrated with the classNames that are generated.
then you have found the right article and the salvation for you ;)
I'm using Emotion so off course you need to install that and also I “was” using @emotion/styled
syntax.
what you need to do now is really easy and only 2 steps:
- change all
@emotion/styled
imports within your components to instead import@emotion/styled/macro
. - Write “label: some-good-semantic-name;” in your *.style.tsx files
export const MainHeader= styled.h1`
font-size: 23px;
color: red;
label: some-good-semantic-name;
`;
and you will now receive classes like
css-1g9lhzz-some-good-semantic-name
*Update
and to make TS happy, add this in tsconfig.json
“plugins”: [{ “name”: “typescript-styled-plugin”, “lint”: { “validProperties”: [“label”] }}]