Styled component not applying styles

[gayathrirajendran]

Current behavior:
Have used styled to style the contents of a component. But it is not working.
In the code, have created a small component and styled it to be color red. But its not applying.
Codesandbox: https://codesandbox.io/p/sandbox/styled-component-demo-gtvf4l

Expected behavior:
Red color is applied to the component

Environment information:
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",

[Thinkscape]

This might be caused by the patch version mismatch after bump on /react while the /styled package has a direct dep pointing to a different version.

Example of a resolution by bun 1.0.22:

❯ npm ls @emotion/react
project@0.1.0 /Users/thinkscape/project
├── @emotion/react@11.11.3
├─┬ @emotion/styled@11.11.0
│ └── @emotion/react@11.11.1
├─┬ @mui/lab@5.0.0-alpha.160
│ ├── @emotion/react@11.11.3 deduped
│ └─┬ @mui/system@5.15.4
│   ├── @emotion/react@11.11.3 deduped
│   └─┬ @mui/styled-engine@5.15.4
│     └── @emotion/react@11.11.3 deduped
└─┬ @mui/material@5.15.4
  └── @emotion/react@11.11.3 deduped

Unsure why this happens, didn't have time to investigate.

overrides and resolutions and version pinning to 11.11.1 helped in my case, i.e.

  "overrides": {
    "@emotion/react": "11.11.1"
  },
  "dependencies": {
    "@emotion/react": "11.11.1",
    "@emotion/styled": "^11.11.0"
  }

[Thinkscape]

References:

#3143
https://github.com/emotion-js/emotion/blob/main/packages/styled/package.json#L32
https://github.com/emotion-js/emotion/blob/main/packages/styled/package.json#L22

[therealgilles]

See: https://emotion.sh/docs/styled#styling-any-component

Your component needs to have a className prop and pass it down. This will fix it:

const errorMsg = ({ children, className }) => {
  return (
    <span className={`zds-error inline-flex ${className}`}>
      <span>{children}</span>
    </span>
  );
};

The basic idea is that the class needs to be attached to a DOM tag element to work.