[React] Styled Component

 

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

const ButtonStyle = {
    'background' : 'black',
    'border' : 'none',
    'color' : 'white',
    'padding' : '7px 14px'
}

const Button = styled.button`
    background : #000;
    border : none;
    color : white;
    padding : 7px 14px;
`

const ButtonHover = styled(Button)`
    background : #007bff;
    :hover{
        background : #0069d9;
    }
`

const Index = () =>{
    const inputRef = React.useRef()
    const handleClick = () =>{
        console.log(inputRef.current);
    }
    return(
        <div>
            <input type="text" ref={inputRef} />
            <button
                style={ButtonStyle}
                onClick={handleClick}
            >
                hello
            </button>
            <Button onClick={()=>{handleClick()}}>aaaa</Button>
            <ButtonHover>bbbb</ButtonHover>
        </div>
    )
}

export default Index

 

styled component

 

npm install styled-components

component/styledComponent 
폴더 만들기

index.jsx
Index 컴포넌트 만들고
App 에 연결

사용하는 곳에서  [index.jsx]
import styled from 'styled-components'

<GameDiv onClick={()=>{handleClick()}}> 
styledComponent 안에서 함수 주려면 이렇게 애로우로 써야함