300x250 cssinjs2 [react, Css-in-JS] tab메뉴 만들기, 스타일 적용, 탭메뉴 tab메뉴 만들기 결과화면(스토리북 이용) 1. import import React, { useState } from 'react'; import styled from 'styled-components'; 2. styled 사용시 submenu라는 클래스 네임에 스타일을 적용시키기 위해선 다음과 같이 하면된다. const TabMenu = styled.ul` background-color: #dcdcdc; font-weight: bold; display: flex; flex-direction: row; justify-items: center; align-items: center; list-style: none; .submenu { width:100% auto; padding: 15px 10px; curs.. 2021. 6. 8. [react] CSS-in-JS 관련 라이브러리 Styled Component Styled Component 정의 React 의 컴포넌트 기반 개발 환경에서 스타일링을 위한 CSS의 성능 향상을 위해 만들어졌다. styled Component 를 사용하면 기존 CSS 문법으로도 스타일 속성이 추가된 React 컴포넌트를 만들 수 있다. styled Component 1. Automatic critical CSS : 화면에 어떤 컴포넌트가 렌더링 되었는지 추적해서 해당하는 컴포넌트에 대한 스타일을 자동으로 삽입된다. 2. No class name bugs : 스스로 유니크한 className 을 생성한다. 이는 className 의 중복이나 오타로 인한 버그를 줄여준다. 3.Easier deletion of CSS : 모든 스타일 속성이 특정 컴포넌트와 연결되어 있기 때문에 만약 컴.. 2021. 6. 1. 이전 1 다음 반응형
