javascript - 样式组件: how to select child component?

Question

// card.js

import styled from 'styled-components'
const Heading = styled.h1`
    color: red;
`;

const Summary = styled.p`
    text-align: center;
`;

const Card = ({className, heading, summary}) => (
    <div className={className}>
        <Heading>{heading}</Heading>
        <Summary>{summary}</Summary>
    </div>
);

export default Card;

// cardWithBlueHeading.js

import styled from 'styled-components';
import Card from './card.js';

const CardWithBlueHeading = styled(Card)`
    // How can I select the Heading component and make it blue?
`;

export default CardWithBlueHeading;

我正在尝试更改子组件的样式。这些风格可能是一次性的情况。我试图避免选择 HTML 元素 h1 和伪选择器。

Answer 1

您可以将属性传递给样式组件，如下所示:

import styled from 'styled-components'
const Heading = styled.h1`
    color: ${props => props.color};
`;

将颜色作为属性传递

<Heading color='blue'/>