묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
CSS관련 질문
과제를 하면서 css 수정하면서 구글링 해봐도 해결이 안되는 부분이 있어 질문드립니다! export const SubmitBtn = styled.button` height: 52px; padding: 14px 60px; background-color: ${props => props.color}}; border: none; font-style: normal; font-weight: 500; font-size: 16px; line-height: 24px; margin-top: 74px; box-sizing: border-box; cursor: pointer; `수정하기/ 취소하기 버튼 CSS입니다. 이렇게 작성했을 때..이렇게 나옵니다. 분명 border: none; 을 작성해줬는데 적용이 안됩니다.이상해서 CSS 속성 하나씩 지워줬을 때,export const SubmitBtn = styled.button` height: 52px; padding: 14px 60px; // background-color: ${props => props.color}}; border: none; font-style: normal; font-weight: 500; font-size: 16px; line-height: 24px; margin-top: 74px; box-sizing: border-box; cursor: pointer; `이런식으로 background-color(또는background 속성)를 주석으로 처리하니 아래 사진처럼 테두리 선이 사라졌습니다.background 속성을 줬을 때 border: none 도 안먹히고 cursor: pointer; 속성도 안먹히던데 뭐가 문제인걸까요..ㅜㅜ
-
미해결[리뉴얼] React로 NodeBird SNS 만들기
emotion SSR 적용 질문있습니다!
안녕하세요 현영님! styled-components 대신에 emotion 사용해서 실습하고 있는데, emotion 공식문서에서 10버전 이상부터는 next에서 SSR 적용이 된다고 나와있는데요. (현재 11버전 사용중입니다.) 그렇다면, pages/_document.js의 코드에서 import React from "react"; import Document, { Html, Head, Main, NextScript } from "next/document"; // import {ServerStyleSheet} from "styled-components" export default class MyDocument extends Document { static async getInitialProps(ctx) { // const sheet = new ServerStyleSheet(); const originalRenderPage = ctx.renderPage; try { // ctx.renderPage = () => // originalRenderPage({ // enhanceApp: App => props => sheet.collectStyles(<App {...props} />) // }); const initialProps = await Document.getInitialProps(ctx); return { ...initialProps, styles: ( <> {initialProps.styles} {/* {sheet.getStyleElement()} */} </> ) }; } catch (err) { console.error(err); } finally { // sheet.seal(); } } render() { return ( <Html> <Head /> <body> <script src="https://polyfill.io/v3/polyfill.min.js?features=default%2Ces2015%2Ces2016%2Ces2017%2Ces2018%2Ces2019" /> <Main /> <NextScript /> </body> </Html> ); } } styled-components 관련 부분만 제외하고 입력하면 될까요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
emotion 과 css 부분 에 질문있습니다.
복사해서 해보고 emotion 직접 써보고 싶어서 간단하게 해보고 있는데 각 컴포넌트마다(signup,login) div 컨테이너로 감싸져있잖아요 근데 그 id 가 container 인 태그는 어디서 css 처리가 된건가요??
