styled-components2 [Next.js, styled-components] Next.js에 styled-components 설정하기 목차 Next.js에 styled-components를 적용해보자https://nextjs.org/docs/app/building-your-application/styling/css-in-js#styled-components Styling: CSS-in-JS | Next.jsUse CSS-in-JS libraries with Next.jsnextjs.orgNext.js 공식문서에 Styled Components를 적용하는 방법이 다루어져있다 세팅방법next.config.js 변경module.exports = { compiler: { styledComponents: true, },}next.config.js를 위처럼 compiler의 styledcomponents를 추가해준다. registry... 2024. 6. 7. 개인 코드 컨벤션 정리 - CSS 목차 styled-components폴더구조컴포넌트 기반 구조로 각 컴포넌트에 대해 별도의 스타일 파일을 생성한다.src/ components/ Button/ Button.tsx Button.styles.ts Header/ Header.tsx Header.styles.ts 네이밍 컨벤션 파일명CamelCase를 사용한다.`Button.styles.ts` 변수명PascalCase를 사용하여 styled-component를 정의한다.const PrimaryButton = styled.button` /* styles */`; 스타일 정의 순서 : 스타일 속성은 다음 순서대로 작성Positioning: position, top, right, bottom, lef.. 2024. 5. 23. 이전 1 다음