css props are not applied within the server component.

[sohnjunior]

Environment

System:

• OS: Linux 6.1 Debian GNU/Linux 12 (bookworm) 12 (bookworm)
• CPU: (2) x64 AMD EPYC
• Memory: 1.33 GB / 4.01 GB
• Container: Yes
• Shell: Unknown

Binaries:

• Node: 20.11.0 - /usr/local/bin/node
• Yarn: 1.22.19 - /usr/local/bin/yarn
• npm: 10.2.4 - /usr/local/bin/npm
• pnpm: 8.15.1 - /usr/local/share/npm-global/bin/pnpm

npmPackages:

• styled-components: 6.1.8 => 6.1.8

Reproduction

codesandbox

snippets overview

"use client";
import { PropsWithChildren } from "react";
import styled, { type CSSProp } from "styled-components";

export const Container = styled.div`
  box-sizing: content-box;
`;

interface AnotherContainerProps {
  css?: CSSProp;
}

export function AnotherContainer({
  css,
  children,
}: PropsWithChildren<AnotherContainerProps>) {
  return <div css={css}>{children}</div>;
}

import { Container, AnotherContainer } from "../components/container";

export default function Page() {
  return (
    <div>
      <Container css={{ color: "red" }}>content1</Container>
      <AnotherContainer css={{ color: "red" }}>content2</AnotherContainer>
    </div>
  );
}

I defined two components: Container and AnotherContainer.
One returns styled.div as is and the other is a wrapped component.

I expect that the CSS prop should be applied appropriately in both cases, but the CSS prop is applied only in AnotherContainer.

Container component throws the following error message:

Expected Behavior

Both Container and AnotherContainer should apply css prop properly.

Actual Behavior

Only AnotherContainer applied css prop.