Javascript 样式化组件嵌套规则不'；行不通

以下是我的文件夹结构：

type/
- Heading.js
- index.js

card/
- Card.js
- CardGroup.js
- index.js

JSX:

适用于

标题

，但不适用于

卡

。我以前遇到过这个问题，我不知道是什么原因造成的。是因为它们在同一个文件夹中吗？是因为它们在我的应用程序中导入的顺序吗？任何想法都会非常有用

更新：

My

Card.js

实现：

const StyledCard = styled.div`...`;

const Card = props => {
  ...
  <StyledCard {...props}>{props.children}</StyledCard>
}

constyledcard=styled.div`……`；
康斯特卡=道具=>{
...
{props.children}
}

您需要以

样式化组件生成的组件为目标（
示例中的StyledCard
）

//Card.js
const ContainerCard=styled.div`
宽度：50px；
高度：50px；
`;
常量卡=（{className}）=>{
返回；
};
//使用任何有效的道具、Card.StyledComponent、Card.Style等。
Card.className=集装箱卡；
导出默认卡；
//App.js
const Container=styled.div`
高度：100vh；
宽度：100vw；
`;
//通过className道具设置自定义组件的样式。
const VioletredRedCard=样式化（卡片）`
背景色：淡紫色；
`;
//以样式化组件生成的组件为目标
const CardWrapper=styled.div`
${Card.className}{
宽度：100px；
高度：100px；
背景颜色：淡绿色；
}
`;
常量应用=（）=>{
返回(
);
};

当然，还要确保像上面的例子一样传递
className
prop

您可以将classname attr与样式化组件一起使用

const Card = styled.div.attrs({
   className:"card"
})`
card styles
`

您可以在CardGroup中使用该类名

const CardGroup=styled.div`
 & .card{}

`

请出示
卡
implementation@DennisVash包括一个简化的
Card.js
示例。谢谢你，伙计，这帮了大忙。我已经用
{…props}
通过了所有道具，所以我基本上必须添加
Card.className=StyledCard和
${Card.className}
设置样式时。请注意，您不必使用
className
，
Card.styledComponent=StyledCard
// Card.js
const ContainerCard = styled.div`
  width: 50px;
  height: 50px;
`;

const Card = ({ className }) => {
  return <ContainerCard className={className} />;
};

// Use any valid prop, Card.StyledComponent, Card.Style etc.
Card.className = ContainerCard;
export default Card;

// App.js
const Container = styled.div`
  height: 100vh;
  width: 100vw;
`;

// Styling custom components, through className prop.
const VioletredRedCard = styled(Card)`
  background-color: palevioletred;
`;


// Target the component generated by styled-components
const CardWrapper = styled.div`
  ${Card.className} {
    width: 100px;
    height: 100px;
    background-color: paleturquoise;
  }
`;


const App = () => {
  return (
    <Container>
      <CardWrapper>
        <Card />
      </CardWrapper>
      <VioletredRedCard />
    </Container>
  );
};

const Card = styled.div.attrs({
   className:"card"
})`
card styles
`

const CardGroup=styled.div`
 & .card{}

`