styled-component

• styled-component 
  • Javascript 파일 내에서 CSS를 사용할 수 있게 해주는 CSS-in-JS 라이브러리.
  • React 프레임워크를 주요 대상으로 한다.

    import styled from 'styled-components'
    
    render(
      <Wrapper>
        <Title>
    	  Hello World!
        </Title>
      <Wrapper>
    );
    
    const Title = styled.h1`
      font-size: 1.5em;
      text-align: center;
      color: palevioletred;
      `;
      
    const Wrapper = styled.section``
      padding: 4em;
      background: papayawhip;
    `;​

  • const 컴포넌트명 = styled.태그명``;  //컴포넌트 이름은 대문자로 시작
  • 스타일을 지정해주기 위해서 ``를 사용한다.
  • 스타일을 입력함과 동시에 해당 스타일을 가진 컴포넌트를 만들 수 있다.
    • ex) div 스타일링 -> styled.div , input 스타일링 -> styled.input
  • 여러 줄의 css 코드를 조건부로 보여주고 싶다면 css를 사용해야 한다.

  • import React from 'react';
    import styled, { css } from 'styled-components';
    
    const Circle = styled.div`
      width: 5rem;
      height: 5rem;
      background: ${props => props.color || black }; 
      border-radius: 50%;
      ${props => 
        props.huge && 
        css`
          width: 10rem;
          height: 10rem;
        `}
    `;
    
    function App() {
      return <Circle color="red" huge />; //circle 컴포넌트에 color, huge라는 Props를 추가해줌.
    }
    
    export default App;

  • button 컴포넌트를 styled-component로 구현하기
    • src 안에 components 디렉터리를 생성 후, 그 안에 Button.js 파일을 생성
    • App.js 에서 Button 을 사용

      import Button from './components/Button';

  • polished의 스타일 관련 유틸 함수 사용

    • import { darken, lighten } from 'polished';

 

---

• import styled from "styled-components";
  
  styled.button`
  	font-size: 1rem;
  `;

• styled 함수는 결국 해당 CSS가 적용된 HTML 엘리먼트나 React 컴포넌트를 리턴한다.
• font-size CSS를 가지는 <button> HTML 엘리먼트를 만들어낸다.

• button {
  	font-size: 1rem;
  }

• 고정 스타일링

• import React from "react";
  import styled from "styled-components";	
  
  const StyleButton = styled.button`	//<button> 엘리먼트에 CSS를 적용한 후 StyledButton 변수에 저장
  	padding: 0.375rem 0.75rem
      .
      .
      .
  `;
  
  function Button({ children }) {
  	return <StyledButton>{children}</StyledButton>;
  }

• import Button from "./Button";
  <Button>Default Button</Button>;	//CSS가 적용된 버튼 컴포넌트를 다른 React 컴포넌트에서 사용할 수 있다.

• 브라우저에서 소스 보기를 해보면 Button 엘리먼트에 Styled Components가 자동으로 생성해준 클래스 이름이 적용되어있음.

 

• 가변 스타일링

• import React from "react";
  import styled from "styled-components";	
  
  const StyleButton = styled.button`	//<button> 엘리먼트에 CSS를 적용한 후 StyledButton 변수에 저장
  	padding: 0.375rem 0.75rem
      .
      .
      .
      color: ${(props) => props.color || "gray"};
      background: ${(props) => props.background || "white"};	//넘겨줘야함
  `;
  
  function Button({ children, color, background }) {
  	return(
        <StyledButton color={color} background={background}>
      	{children}
     	  </StyledButton>;
      );
  }

• <Button> 에 넘어논 color와 background prop을 <StyledButton> 컴포넌트로 넘겨줘야 한다.

• import Button from "./Button";
  <Button color="green" background="pink">
    Green Button
  </Button>;

• className props로 넘기기

  • function TodoItem({ todo, onCheckToggle, onInsertToggle, onChangeSelectedTodo }){
      const { id, text, checked } = todo;  // 객체 구조 분해 할당
      return (
        <Item>
          <Check checked={checked}>  //  checked state를 Check 컴포넌트에 넘겨준다
          {/* <div className={`content ${checked ? "checked" : ""}`}>  */}
            { checked ? 
              < MdCheckCircle onClick={()=>{onCheckToggle(id)}} /> 
              :
              < MdCheckBoxOutlineBlank onClick={()=>{onCheckToggle(id)}} />} 
            <Text onClick={()=>{
              onInsertToggle()
              onChangeSelectedTodo(todo);
            }}><Content>{ text }</Content></Text>
          </Check>
        </Item>
      );
    }

  • const Check = styled.div`
      svg{ 
        display: inline-block;
        padding: 5px;
        vertical-align: middle;
        color: hotpink;
        cursor: pointer;
      }
      p {
        ${({ checked }) => {	//  js와 관련된 몰?루
          return checked ? 
            css`
              text-decoration : line-through;
              opacity : 0.5;
            ` 
          : null; 
        }
      }
    `;