CODEWITHSUNDEEP
javascriptreactjsstyled-components
huihuihui
huihuihui

Reputation: 189

styled components: how to select child component?

// 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;

I'm trying to change the styles of a child component. These styles will likely be a one off situation. I'm trying to avoid selecting the HTML element h1 and pseudo selectors.

Upvotes: 0

Views: 5062

Answers (2)

Umesh
Umesh

Reputation: 2742

You can pass props to styled components like below:

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

Pass the color as prop

<Heading color='blue'/>

Upvotes: 3

jovi De Croock
jovi De Croock

Reputation: 615

You can give your Heading a className property and then select it with

const CardWithBlueHeading = styled(Card)`
  > .[classNameYouGive] {
    background: blue;
  }
`;

This is the standard css way.

Upvotes: 0

Related Questions