인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

Inflearn Community Q&A

hib4888's profile image
hib4888

asked

[Renewal] Creating NodeBird SNS with React

Create a profile page

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

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;

 

reduxnodejsexpressreactNext.js

Answer 1

0

zerocho님의 프로필 이미지
zerocho
Instructor

비슷한 질문이 많았는데 css 우선순위 문제로 보입니다. css 우선순위 파악해보세요.

hib4888님의 프로필 이미지
hib4888
Questioner

빠른답변 감사합니다!!

!important로 우선순위를 높히니까 해결되었습니다

근데 제가 css를 공부할때 !important를 왠만하면 사용하지 말라고 배웠던것같은데

질문예제처럼 스타일이 적용안될때마다 !important를 사용해서 우선순위를 높혀도 문제가 없는걸까요?

zerocho님의 프로필 이미지
zerocho
Instructor

보통은 !important 안 쓰려고 같은 클래스명을 여러 번 쓴다던가 하는 꼼수를 사용합니다.

hib4888's profile image
hib4888

asked

Ask a question