Resolved
Written on
·
458
0
안녕하세요 제로초님 강의 정말 잘듣고있습니다.
실습을 진행하는중에 ant-design List컴포넌트에 인라인 스타일로는 적용이 되는데
styled-components를 사용하면 적용이 되지 않아서 질문드립니다.
import React from 'react';
import { List, Card, Button } from 'antd';
import { DeleteOutlined } from '@ant-design/icons';
import PropTypes from 'prop-types';
import styled from 'styled-components';
const ListWrapper = styled(List)`
padding: '2em 0 1em 0';
`;
const LikePostList = ({ mypageInfo }) => {
return (
<ListWrapper
grid={{
gutter: 4,
xs: 2,
md: 4,
}}
bordered
loadMore={<div style={{textAlign: 'center', margin: '10px 0'}}><Button size='large'>More View</Button></div>}
dataSource={mypageInfo}
renderItem={(item) => (
<List.Item>
<Card
style={{width: 200}}
cover={
<img
alt='post card image'
src={item.cardImg}
/>
}
actions={[<DeleteOutlined key='delete'/>]}
hoverable
>
<Card.Meta
title={item.title}
description={item.desc}
/>
</Card>
</List.Item>
)}
>
</ListWrapper>
);
};
LikePostList.propTypes = {
mypageInfo: PropTypes.array.isRequired,
};
export default LikePostList;
빠른답변 감사합니다!!
!important로 우선순위를 높히니까 해결되었습니다
근데 제가 css를 공부할때 !important를 왠만하면 사용하지 말라고 배웠던것같은데
질문예제처럼 스타일이 적용안될때마다 !important를 사용해서 우선순위를 높혀도 문제가 없는걸까요?