Как стилизовать дочерний компонент из родительского стилизованного компонента с учетом переданных реквизитов

Question

Предположим, у меня есть этот набор стилей для Card:

import { CardImageWrapper } from "components/CardImage/styles.jsx"

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

А затем компонент React, который использует эти стили:

import React from "react";
import { CardWrapper } from "./styles.jsx";
import { CardImage } from "components";

const Card = props => {
  return (
    <CardWrapper>
      <CardImage float = {true} />
    </CardWrapper>
  );
};

export default Card;

Здесь вы можете увидеть стилиCardImage:

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

И компонент React:

import React from "react";
import { CardImageWrapper } from "styles.jsx";

const CardImage = props => {
  return (
    <CardImageWrapper />
  );
};

export default CardImage;

Вопрос в том, как я могу стилизовать CardImage из стилей Cards, в зависимости от значения свойства float?

Должен ли я импортировать CardImage из стилей Card и затем работать с этим, или просто передать {... props} в CardImageWrapper из CardImage?

Большое спасибо,