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;

问题是，如何根据float属性的值从Cards样式设置CardImage的样式？

我应该从Card样式导入CardImage然后使用它，还是从CardImage传递{... props}到CardImageWrapper？

非常感谢

考虑传递的道具，如何从父样式的组件样式子组件

0 个答案: