[React] Styled Components

Styled Components : scss 코드를 설치 없이 사용하고 css 파일 없이 사용,

컴포넌트에 스타일을 적용하여 스타일 코드를 몰아 넣을 수 있으며 공통 코드를 줄이고 React의 컴포넌트 형태로 사용할 수 있다.

 

css in js 기술 - js안에서 css를 사용할 수 있는 것 

 

 

npm i styled-components

 

App.js에 import './App.css'를 제거하고 아래 구문 추가 

 

import styled from 'styled-components';

 

sass 작업 없이 스타일을 적용할 수 있다. 

 

styled.태그이름 을 사용해서 바로 react component를 만들 수 있다.

 

import React from 'react'; import styled from 'styled-components'; 

function App() { 
return ( 
    <Container> 
        <Button /> 
        <Button danger /> 
    </Container> 
    ); 
} 

const Container = styled.div` 
    width: 100%; 
    height: 100vh; 
    background-color: #bdc3c7;
`; 

const Button = styled.button` 
    border-radius: 50px; 
    padding: 5px; 
    min-width: 120px; 
    color: white; 
    font-weight: 600; 
    -webkit-appearance: none; 
    cursor: pointer; 
    &:active, 
    &:foucus { 
        outline: none; 
    } 
`; 

export default App;

 

 

최대 장점 

- 템플릿 리터럴을 사용한다.

- prop을 이용해 css 옵션을 조정할 수 있고, 여러 css를 조절할 수도 있다. 

 

 

글로벌 사용

 

 

 

https://www.howdy-mj.me/css/styled-components-with-global-style/

Styled Components를 Global에서 사용하기(w/반응형)

 

 

 

 

출처

 

https://xtring-dev.tistory.com/entry/Styling-Styled-Components-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B3%A0-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0-%F0%9F%92%85

[Styling] Styled Components 이해하고 사용하기! (with React) 💅