Изменить; Решаемые. Я глубоко в кодовой дыре и пропустил точку с запятой. Благодаря стилизованным компонентам, находящимся в обратном тике, он не проверяет ваш код на наличие ошибок: (
Я пытаюсь стилизовать свой компонент согласно документации здесь , но безуспешно. Надеемся Это простая пользовательская ошибка, и я хотел бы получить обратную связь. Вот мой стилизованный файл компонента:
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>
Опять же, обратите внимание, что носитель пропускается в компонент CardWrapper. В результате на моей веб-странице все стили повреждены и ничего работает за пределами границы. Если я просто добавлю фон: зеленый или фон: красный; все снова будет работать, как задумано. Я довольно озадачен и надеюсь, что это простая ошибка пользователя. Спасибо за вашу помощь.