[react] styled components 사용법

https://styled-components.com/

styled-components

 

1. 설치하기

vscode 의 터미널에 npm i styled-components 작성하여 설치

 

2. 확장 프로그램 설치

vscode 확장 프로그램에 styled 치면 나오는 vscode-styled-components 설치

 

3. 사용되는 App.js에 컴포넌트 태그 넣기

▼  아래에선 <Style />

import './App.css';
import Style from './components/Style'

function App() {
  return (
    <div className="App">
      <Style />
    </div>
  );
}

export default App

 

4. 적용 파일에 import, export 하기 (ex: src>components>Style.jsx)

   import styled from "styled-components";

   export default Style;

 

▼ 참고 전체 code

import React from 'react';
import styled, { keyframes } from "styled-components";

/* styled components  */
const Style = () => {
    return (
        <div>
            <Box>{/* 디자인을 하기 위한 컴포넌트 */}
                <Title fontSize='2rem' color='#daa8c6'>스타일드 컴포넌트</Title>
                <Title fontSize='1.5rem' color='#b2d6ac'>CSS IN JS</Title>
                <Title color="#ee7124">Fun and Easy</Title>
                <Btn borderColor="#03f" active>normal</Btn>{/*bordercolor:임의,아래랑 통일만 되면 됨*/}
                <Btn borderColor="#494d5e">disabled</Btn>
                <Btn borderColor="#ec430b">active</Btn>
                <Text fontSize='25px' color='#f99'>2022년 6월 20일</Text>    
                <Text fontSize='16px' color='#915e5e'>월요일</Text>    
                <Text fontSize='24px' color='#442e2e'>오전 10시 13분</Text>    
            </Box>{/* Box:임의 */}
            <Box as="ul">
                {/*as: 모든 style을 유지하면서, 최종적으로 render되는 항목의 변경만을 위한 경우 사용하는 polymorphic(여러형태) prop이다. */}
                <Text size='16px' color='#f59' as='li'>menu1</Text>    
                <Text size='16px' color='#f59' as='li'>menu2</Text>    
                <Text size='16px' color='#f59' as='li'>menu3</Text>    {/* as를 이용해 1i로 바꿈 */}
            </Box>
            <Box>
                <AniBtn>애니메이션 버튼</AniBtn>
            </Box>
        </div>
    );
};

export default Style;

const Btn=styled.button.attrs(props=>({
    /* attrs:지정/style이 지정된 Component에 props를 연결하는 method이다.
유일한 argument는 props에 병합될 객체이다.*/
    type:'button', /* type:지정(원래버튼태그가 가지고 있는 속성임) */
    className:props.active ? 'btn on': 'btn'
}))`
    width:80px;
    height:40px;
    border-radius:3px;
    margin:10px;
    color:${(props)=>props.borderColor};
    border:1px solid ${(props)=>props.borderColor};
`
    


const Box=styled.div`
    width:500px;
    height:300px;
    border:5px solid red;
    margin:3px auto;
    text-align:center;
`

//props 사용
const Title=styled.h2`
    font-size:${(props)=>props.fontSize};
    color:${(props)=>props.color};
    margin: 1rem 0;
`

const Text=styled.p.attrs(props=>({
    type:'p'
}))`
    margin:10px 0;
    font-size:${(props)=>props.fontSize};
    color:${(props)=>props.color};
`

const colorChange=keyframes`
    0%{background-color:red;}
    100%{background-color:yellow;}
`

/* 확장 (styled(컴포넌트)) 시키고 애니메이션 적용*/
const AniBtn=styled(Btn)`
    width:400px;
    animation:${colorChange} 1.5s alternate infinite;
`

/* 
1.  as사용 
2. props 사용
3. attrs 사용
4. 확장
5. 애니메이션 적용
6. 글로벌 css

 scss 
 module.css 
 styled components 
 css in js  
*/