如何在React Styled-Components中设置子组件的样式

Question

I'm trying to style the child component of a styled-component, but it sends the css to the parent instead of the child/ This is my code,

export const Card = styled.div`
  position: relative;
  ${props => props.horizontal && `
  ${CardImage}{
     max-height: 60%;
     overflow: hidden;
  }`}
`
export const CardImage = styled.div`
    position: relative;
`

EDIT: When I add a condition before rendering that's when it doesn't work

Answer 1

You're almost there, you're just missing a $ in your code and you'll need to move the CardImage above the Card component:

export const CardImage = styled.div`
    position: relative;
`

export const Card = styled.div`
    position: relative;
    ${CardImage}{
        max-height: 60%;
        overflow: hidden;
    }
`

Edit (04/04/2018):

If you want to add a condition around a whole block like you have, you need to import the css function from styled components and use that:

import styled, {css} from "styled-components";

export const CardImage = styled.div`
    position: relative;
`

export const Card = styled.div`
    position: relative;

    ${props => props.horizontal && css` // - Notice the css` here.
        ${CardImage}{
            max-height: 60%;
            overflow: hidden;
        }
    `}
`

Answer 2

const StyledCard = styled.div`
   //parent styles goes here
`;
const StyledImage = styled.img`
   //image styles
`;

class CardImage extends Component {
   render() {
     return <StyledImage/>
}

export default class Card extends Component {
  render() {
    return <StyledCard>
               <CardImage/>
           </StyledCard>
  }
}

Should it work for you?