ant-design List컴포넌트에 styled-components가 적용되지 않는 문제 질문드려요

안녕하세요 제로초님 강의 정말 잘듣고있습니다.

실습을 진행하는중에 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;