樣式化的組件嵌套規則不起作用

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>
  );
};

當然， 如果您想通過styled(Card)設置卡片樣式，請確保像上面的示例一樣傳遞className屬性。

Answer 2

您可以將類名 attr 與樣式化組件一起使用。

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

您可以在 CardGroup 中使用該 className

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

`