Are styles created in the client component only available in the client component?

[ghost]

In the client component where you wrote use clinet, you defined the style as css.raw and exported it.

I imported the styles from another server component and merged them, but the imported styles are not applied.

However, if I change the useing component to the client component, it works again.

I've tried defining the styles in a ts file and exporting it and it works fine, so it seems to be a problem with styles created in the client component.

Is it because the client component and server component read the styles at different times?

exported style
/src/component/Header.tsx

imported style
/src/component/HomeOnlyHeader.tsx

[astahmer]

can you make a minimal reproduction ?

[ghost]

@astahmer

https://github.com/phonego-ryong/panda-exam

I have created an example

NormalText is a client component, and we're defining and exporting styles with
We are defining and exporting styles in CSS and CSS.RAW.

The SmallText component is the server component and is importing and using a smallTextStyle defined in css.

The RedText component is the server component and is importing and using the normalTextStyle defined in css.raw.

When I run the app, the style is not being applied to the RedText, but the SmallText is being applied normally.
However, if you change the RedText to a client component or change the NormalText component to a server component, it works fine.

[astahmer]

got it, thanks !
the issue here is Nextjs specific

since NormalText.tsx is a client component (contains use client), the RSC doesn't seem to be able to resolve the value of normalTextStyle (it logs an empty object {}) in the RedText component

now, if you move the normalTextStyle from NormalText.tsx (contains use client) to a styles.ts file, and import normalTextStyle from there in both NormalText.tsx and RedText.tsx, the styles will work as expected

// styles.ts
import { css } from "../../../styled-system/css";

export const normalTextStyle = css.raw({
  fontSize: "24px",
  color: "blue.400",
});