해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
과제를 하면서 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; 속성도 안먹히던데 뭐가 문제인걸까요..ㅜㅜ
- emotion
- css
- background
- border
강정현
댓글 1
좋아요 0
조회수 543
미해결
[리뉴얼] React로 NodeBird SNS 만들기
안녕하세요 현영님! 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 관련 부분만 제외하고 입력하면 될까요?
- emotion
- redux
- ssr
- react
- express
- nodejs
- Next.js
제로마운틴
댓글 1
좋아요 0
조회수 796
미해결
Slack 클론 코딩[실시간 채팅 with React]
복사해서 해보고 emotion 직접 써보고 싶어서 간단하게 해보고 있는데 각 컴포넌트마다(signup,login) div 컨테이너로 감싸져있잖아요 근데 그 id 가 container 인 태그는 어디서 css 처리가 된건가요??
- emotion
- typescript
- exx
- 웹팩
- Socket.io
- babel
- react
- 클론코딩
승딱
댓글 1
좋아요 0
조회수 269
