인프런 커뮤니티 질문&답변

asy_7님의 프로필 이미지
asy_7

작성한 질문수

[리뉴얼] React로 NodeBird SNS 만들기

반응형 그리드 사용하기.

Warning: Prop `style` did not match. Server:

작성

·

583

0

프롭 스타일이 서버랑 매치되지 않는다는게

뭘까요 ..? 

왜 반응형이 안되죠 ㅠㅠ

import React from 'react';
import propTypes from 'prop-types';
import Link from 'next/link';
import { MenuInputRowCol } from 'antd';

const AppLayout = ({ children }) => {
  return(
    <div>
      <Menu mode="horizontal">
        <Menu.Item>
          <Link href="/"><a>노드버드</a></Link>
        </Menu.Item>
        <Menu.Item>
          <Link href="/profile"><a>프로필</a></Link>
        </Menu.Item>
        <Menu.Item>
          <Input.Search enterButton style={{verticalAlign: "middle",}}/>
        </Menu.Item>
        <Menu.Item>
          <Link href="/signup"><a>회원가입</a></Link>
        </Menu.Item>
      </Menu>
      <Row>
        <Col xs={24} md={6}>
          왼쪽메뉴
        </Col>
        <Col xs={24} md={12}>
           {children}
        </Col>
        <Col xs={24} md={6}>
          오른쪽메뉴
        </Col>  
      </Row>
    </div>
  );    
}; 

AppLayout.propTypes = {
  children: propTypes.node.isRequired,
};

export default AppLayout;

답변 3

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

네 경고는 큰 문제가 아닙니다. 저 경고는 서버 사이드렌더링할 때 해결됩니다.

0

asy_7님의 프로필 이미지
asy_7
질문자

앗.. 확대기능을 사용하고 있어서 그랬네요 하하;

혹시 저렇게 경고 떠도 잘 되기만 하면 무시해도 되나요?

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

모바일 화면으로 만드신 후에 개발자 도구 element 탭에서 Col 태그 선택해서 styles탭에서 css확인해보세요.

asy_7님의 프로필 이미지
asy_7

작성한 질문수

질문하기