Javascript 如何在反应样式化组件中设置子组件的样式

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

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

编辑：当我在渲染前添加一个条件时，该条件不起作用`

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

//父样式在这里 `; const StyledImage=styled.img` //图像样式 `; 类CardImage扩展组件{ render（）{ 返回 } 导出默认类别卡扩展组件{ render（）{ 返回 } }

---

它是否适合您？

您就快到了，您的代码中缺少了一个

$

，您需要将CardImage移到卡组件上方：

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

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

编辑（2018年4月4日）：

如果您想像以前一样在整个块周围添加条件，则需要从样式化组件导入

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

---

我不想将卡片和卡片图像合并到同一个组件中。还有其他方法吗？您也可以将它们拆分为不同的组件。我已经编辑了我的答案-这就是您的意思吗？谢谢您的回答，但当我尝试在设置样式之前添加条件时，它不起作用。请查看edit@Marvin您需要声明

CardImage

在

卡之前

就像在我的示例中一样，我也为您的新condition@CubedEye如果您想使用传递给CardImage的道具从卡中创建CardImage样式，该怎么办？当CardImage在该卡容器中实例化时，您如何访问它接收的道具？@CubedEye:如果我想传递呢儿童到

CardImage

？执行

某些文本

不起作用。在使用React的TypeScript中使用此模式时，我收到错误“没有重载匹配此调用”。