뉴히의 개발 로그

React Styled Components CSS-in-JS 라이브러리 Styled Components를 사용해서 컴포넌트 만들기 CSS in JS는 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법 기본사용 방법을 다룬글도 있긴한데 https://newheee.tistory.com/41 오늘은 props에 따라 다른 스타일 적용이 가능한 가변 스타일링에 대해 공부한 내용을 기록하려한다 const StButton = styled.button` align-items: center; background-color: ${(props) => props.bgColor || '#fff'}; border: ${(props) => props.stBorder || 'no..

styled components css에서 자바스크립트를 사용할 수 있는 styled components react 패키지 설치 후 사용 가능하다. yarn add styled-components 사용방법 // App.jsx import React from "react"; import styled from "styled-components"; // styled 키워드를 사용해서 styled-components 방식대로 컴포넌트 생성 const Box = styled.div` // styled.뒤에는 html의 태그를 넣는다 // 빽틱안에 css코드를 넣는다. jsx 안에 바로 사용하던 객체스타일 말고. 원래 css코드와 동일 width: 100px; height: 100px; margin: 20px; `..