Question

编辑；解决了。我深陷一个代码漏洞，并且缺少半冒号。归功于样式化的组件位于后方，它不会检查您的代码是否有错误：（

我正在尝试根据文档here设置组件的样式，但没有成功。希望这是一个简单的用户错误，希望能得到一些反馈。这是我样式化的组件文件：

export const CardWrapper = styled.div`
  border: 1px solid black;
  background: ${props => (props.media ? "green" : "red")}
  width: 150px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 5px;
  margin: 15px;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 10px 0 rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  &:hover {
    box-shadow: none;
  }
  &:active {
    background: ${({ theme }) => theme.colors.cardActive};
  }
`;

如您所见，背景应该根据是否将媒体道具提供给组件而改变。这是启动组件的我的文件：

 <CardWrapper media>
    <H3 className="card-title">{title}</H3>
    <P className="card-subtitle mb-2 text-muted">{subtitle}</P>
    <P className="card-text">{notes}</P>
    <ButtonWrapper>
      {download ? (
        <Button onClick={buttonClick}>
           <DownloadIcon />
        </Button>
       ) : null}
    </ButtonWrapper>
 </CardWrapper>

同样，请注意将prop媒体传递到CardWrapper组件中。在我的网页上的结果是样式都坏了，边框之外没有任何工作。如果我简单地把背景：绿色；或背景：红色；一切都会按预期进行。我很困惑，希望这是一个简单的用户错误。谢谢您的帮助。

Answer 1

您缺少分号；在背景结尾

background: ${props => (props.media ? "green" : "red")};

在样式化组件中使用道具来更改样式

1 个答案: