javascript - 如何在 react 样式组件中设置子组件的样式

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

编辑(2018年4月4日):

如果您想像您一样在整个 block 周围添加条件，则需要从样式组件导入 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;
        }
    `}
`