Open sohnjunior opened 2 months ago
codesandbox
"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.
AnotherContainer
Container component throws the following error message:
Container
Both Container and AnotherContainer should apply css prop properly.
css prop
Only AnotherContainer applied css prop.
Environment
System:
Binaries:
npmPackages:
Reproduction
codesandbox
snippets overview
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
andAnotherContainer
should applycss prop
properly.Actual Behavior
Only
AnotherContainer
appliedcss prop
.