OKKY
커뮤니티
Q&A
지식
이벤트
Contact
부트캠프
Jobs
Search Bar
로그인
회원가입
styled-components
전체
최신순
질문하기
답변
3
froggg
·
1년 이상
286
0
답변 3
styled-component 간단한 질문..
const Container = styled.div` height: 100%; width: 100%; background: #ddd; `; const Box = styled.div` height: 500px; width: 500px; background: red; `; const Button = styled.button` background: red; `;
답변
1
ki_ki
·
약 2년
278
1
답변 1
nextjs, styledcomponent 설정중 서버 컴포넌트 관련 질문
nextjs 입문중입니다. styled-components를 얹어서 사용하려고 하는데요 궁금한 점이 있어서 질문 드립니다. 관련 설정중에 이런 부분이 있는데, https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components 코드내부에서 RootLayout에서 StyledComponentsRegistry 를 children위에 감싸게 되는데 해당 컴포넌트
해결
2
잣댐스키
·
2년 이상
327
0
해결 2
리액트 렌더링 최적화 (styled component)
렌더링 최적화를 위해 크롬 개발자 도구로 확인하며 개발하던 도중 질문이 있어서 남겨봅니다. const Container = React.memo(styled.div` position: relative; width: 100%; display: flex; flex-direction: column; justify-content: flex-start; `); const FlexDiv= React.memo(styl
답변
3
BearHumanS
·
2년 이상
555
0
답변 3
styled components가 일부분?이 적용이 안됩니다.
nextjs 13으로 진행 중이고, useModal hook을 만들어서 사용 중 입니다. 스타일드 컴포넌트를 사용해서 공통 버튼 부분을 만들었고, 실제로 버튼 props를 전달하면 잘 적용됩니다. 그런데 그냥 다른 컴포넌트 페이지 내부에서 일반 button을 만들어서 모달 on, off 동작을 하면 모달 내부에서 공통으로 사용된 버튼이 스타일이 안먹힙니다. 제가 뭘 놓치고 있을까요.. 3자의 눈으로 부탁드려도 모달 열고 닫고 하는 로직 이런 부분엔
답변
2
쿠인
·
2년 이상
271
0
답변 2
styled-component에서 keyframes를 만들 때 해당 내용 안에 변수를 사용 가능한가요?
안녕하세요 프론트엔드를 공부하는 학생입니다. react를 가지고 포트폴리오 사이트를 제작 중인데 애니메이션 효과를 넣기위해서 styled-component를 사용하는 프로젝트에서 keyframes를 작성하고 있습니다. // presenter.js function Presenter() { return ( <Animation> ) } // styles.js import { keyframes } from "@emotion
답변
1
해정이오
·
거의 3년
270
0
답변 1
styled-components 의 상속 방식과 props 전달 방식 중 어떤 방식을 택해야 할까요 ?
안녕하세요 ! React와 styled-components를 사용해서 웹 프론트엔드 개발을 하던 도중 의문점이 두 가지가 생겼습니다 ! 첫번째는, 하나의 wrap에 여러 개의 버튼이 있는 모달을 만들면서 든 의문점인데요, 위와 같이 같은 스타일을 가지고 있고, 스타일의 변경점이 없지만 이 컴포넌트가 어떤 버튼인지 알려주기 위해서 상속을 통해 네이밍을 하는 것이 맞을지, 아니면 이런식으로 같은 스타일을 굳이 네이밍할 필요가 없는지가 궁금했었습니다
답변
1
내가선택한코딩이다악깡버
·
거의 3년
314
0
답변 1
리액트 styled-components 질문 ㅠㅠ
Button.tsx import React from "react"; @ts-ignore export default function Button({ text }) { return <button>{text}</button>; } Pet.tsx import React from 'react'; import styled from 'styled-components'; import
해결
3
그린티라떼
·
거의 3년
280
0
해결 3
styled-components fadein 애니메이션 적용 관련
동일한 모양의 요소를 시간 간격을 두고 순차적으로 나타나게 하고 싶습니다. 아래처럼 delay를 설정한 후 실행해보니 처음에 4개가 먼저 보였다가 사라진 후에 애니메이션이 시작됩니다. 처음에 보이지 않도록 적용하는 방법이 있을까요? (시작 시) (실행 중) import { styled, keyframes } from "styled-components" const fadein = keyframes` from
답변
2
그린티라떼
·
거의 3년
212
0
답변 2
요소 클릭시 styled-components 스타일 적용 관련
해당 아래 요소를 클릭하면 이와 같이 스타일이 변경되도록 하고 싶습니다. const Box = styled.div` display : flex; width: 281px; height: 120px; flex-direction: column; justify-content: center; flex-shrink: 0; border: 1px solid var(--neutr
답변
1
chilsung
·
거의 3년
1.1k
0
답변 1
[react] styled-component props 경고 메시지 consider using transient props (`$` prefix for automatic filtering.)
안뇽하세요. react와 styled component를 사용하여 개인 프로젝트를 진행중에 있는데요, styled component를 사용할때 propf를 보내 사용할때 consider using transient props ($ prefix for automatic filtering.) 이런 경고메시지가 가끔 뜨던데, import React from 'react'; import styled from 'styled-compon
답변
1
그린티라떼
·
거의 3년
483
0
답변 1
styled-component 가운데 정렬 관련
로그인 화면을 구현중입니다. 다음 그림과 같이 가로 방향으로 중앙에 정렬하기 위해서 상위 App 컴포넌트에 display: flex; justify-content: center; 와 같이 적용했는데 아래에 있는 이미지는 정중앙에 배치가 되지 않았습니다. 현재 설정한 크기 (303px x 302px)을 유지하면서 중앙에 배치하는 방법을 알려주시면 감사하겠습니다. import React from 'react'; import
답변
3
공부좀해라
·
약 3년
274
0
답변 3
스타일 컴포넌트 파라미터 props 질문입니다.
// 스타일컴포넌트 파라미터 const PlayerWrapper = styled.div<{ isParam: boolean }>` // css ${props => props.isParam && css` // css `} ` // ReactPlayer 를 받은 스타일 컴포넌트 const ReactPlayerStyled = styled(ReactPlay
답변
2
ㄱ.욱
·
약 3년
369
0
답변 2
vscode styled-components 자동완성
오늘 갑자기 vscode에 확장자인 vscode-styled-components 확장자에 자동완성 기능이 작동을 안하더라구요 혹시 이와 같은 문제를 아시는 분 계신가여
해결
3
robotic
·
3년 이상
340
0
해결 3
styled-component 공통컴포넌트 재사용 관련 포트폴리오 프로젝트
안녕하세요 선배님들 6개월간 많은 배움끝에 포트폴리오를 제작하여 취업문에 발들이려 하는 취준생입니다 포트폴리오 제작 과정에서 styled-components를 사용 하기로 마음 먹었는데요 그 과정에서 컴포넌트를 나누는 방식에 관해 조언 좀 여쭙고자 합니다 case 1 공통컴포넌트 파생컴포넌트 같이 한곳에 묶기 Wrap 이란 공통 컴포넌트가있을때 Wrpa을 재사용한 컴포넌트를 한곳에 넣는게 좋을까요 .. ? case 2 공통컴포넌트와
답변
1
서치리
·
3년 이상
424
0
답변 1
styled component 클래스명
프론트엔드 공부를 하고 있는 취준생입니다.위 사진과 같이 스타일컴포넌트명을 하나씩 작명안하고 p 태그와 h1 태그를 섞어서 스타일을 적용시켜주고있는데하나하나 작명을해
답변
2
몰감
·
3년 이상
226
0
답변 2
styled-components 잘 아시는분...
왜 적용이 안될까요....
답변
0
hangsyong
·
3년 이상
323
0
답변 0
styled-components에서 이 기능을 해주는 게 뭐죠..?
const Btn = styled.button` color: red;`;const GreenButton = styled(Btn)` background-color: green;`;styled co
답변
0
쫀구
·
거의 4년
566
0
답변 0
vscode에서 리액트 styled-component 익스텐션 사용하는데 코드색상이 왜 이상해질까요?
맥 사용자입니다. vscode-styled-component 익스텐션 사용하려고 설치후 코드 작성하는데 색이 이상하게 변해 버리는데 이거 어떻게 해결할 수 있을까요 ?ㅠ 이런거에 좀 민감해서 구글링해도 안나오네요p style="col
답변
6
나루토
·
약 4년
2.6k
0
답변 6
window mac 에서 css구현이 서로 다르게 떠요 ㅠㅠ
이게 맥이구 이게 윈도우 화면 입니다 ㅠ별점 기능 구현 하는중에 두 이미지를 겹쳐서 사용 하고 있는데..해결
답변
3
potato
·
4년 이상
828
0
답변 3
리액트에서 module css 와 styled-components 중 어떤 것을 사용하는 것이 좋을지 판단이 서지 않습니다.
제목 그대로입니다.개인 프로젝트를 진행하고 있는데 module css 와 styled-components 중 어떤 것을 사용하는 것이 좋을지 정확한 판단이 서지 않습니다. 상황마다 적합한 스타일링법이 있는 걸까요? 아니면 개인의 취향일까요?아니면 상황에 따라 동시에 사용하는 경우도 있나요?styled componont 만을 사용하기엔 코드의 가독성이 떨어지는 것 같고,module css를
이전
1
2
다음
Search Bar
