样式化的组件嵌套规则不起作用

Question

这是我的文件夹结构：

type/
- Heading.js
- index.js

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

JSX：

<CardGroup>
  <Heading>...</Heading>
  <Card>...</Card<
</CardHeading>

现在，如果Heading和Card组件嵌套在CardGroup中，则我将尝试为其设置不同的样式。 CardGroup.js：

import Heading from '../type';
import Card from './Card';

const CardGroup = styled.div`
  ${Heading} { ... }
  ${Card} { ... }
`;

Heading正常，但Card无效。我之前遇到过这个问题，我无法解决造成此问题的原因。是因为放在同一个文件夹中吗？是因为它们在我的应用程序中导入的顺序吗？任何想法都会很有帮助。

已更新：

我的Card.js实现：

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

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

Answer 1

您需要定位由styled-component（在您的示例中为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>
  );
};

当然，if you want to style the card via: styled(Card)，请确保像上面的示例一样通过className道具。

Answer 2

您可以将classname attr与带样式的组件一起使用。

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

，您可以在CardGroup中使用该className

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

`