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

Question

我正在尝试设置样式化组件的子组件的样式，但是它将CSS发送给父组件而不是子组件/这是我的代码，

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

编辑：当我在渲染之前添加条件时，那是行不通的

Answer 1

您快到$ ，您的代码中只缺少$ ，需要将CardImage移动到Card组件上方：

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

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

编辑（04/04/2018）：

如果要像周围一样在整个块周围添加条件，则需要从样式化的组件中导入css函数，并使用该函数：

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

它应该为您工作吗？