React 10-1 Styled Component

1. 선언하기

아래의 패키지를 설치 후 사용할 수 있다.

npm i styled-components

함사 밖에 선언해 컴퍼넌트 선언처럼 사용을한다.

 

기본적은 형태는

import styled from 'styled-components';

const 변수명 = styled.태그`
  css 작성
`;

function App() {
  return (
    <div>
      <변수명 />
    </div>
  );
}

export default App;

 

 

---

2. css컴퍼넌트에 몇 개 요소만 변경하고 싶을 때

 1. prop스로 선언하여 css에 적용하기

 - JSX에 선언한 컴퍼넌트에 prop를 선언하고 원하는 css에 넣는다.

 

예)

import styled from 'styled-components';

const Box = styled.div`
  width: 100px;
  height: 100px;
  background-color: ${p => p.afterColor};
`

function App() {
  return(
    <Box afterColor="red" /> {/*색만 변경*/}
    <Box afterColor="blue" />
  )
}

 

2. 컴퍼넌트를 복사해 원하는 값만 추가하기

 

예)

//위의 imp와 Box 컴퍼넌트는 동일함
const Circle = styled(Box)`
  border-radius: 50px
`

function App() {
  return(
    <Box afterColor="red" /> {/*네모 모양*/}
    <Circle afterColor="blue" /> {/*동그라미 모양*/}
  )
}

 

 

---

3. css컴퍼넌트에 테그 값 변경하기

 - JSX에 선언한 컴퍼넌트에 as=""를 추가 후 문자열 안에 원하는 테그 값을 넣으면 변경된다.

 

예)

const Btn = styed.button`
  color: white;
  background-color: black;
  border-radius: 15px
`

function App() {
  return (
    <div>
      <Btn as="a" href="/">Home</a> {/* a테그로 변경됨 */}
      <Btn>LogIn</Btn>
    </div>
  );
}

 

 

---

4. 미리 속성 값 성정하기

 - 테그 값 뒤에 attrs({ key: value})를 선언하면 된다

 

예)

const Input = styled.input.attrs({ required: true })`
  color: gray;
`

function App() {
  return (
    <div>
      <Input />
      <Input />
    </div>
  )
}