styled 컴포넌트 이쁘게만들기

yarn start 전에 yarn add styled-components

 

장점 

class 이름 짓기에서 해방

컴포넌트에 스타일을 직접 적기 때문에 간단하고 직관적

import logo from './logo.svg';
import styled from 'styled-components'

function App() {
  return (
    <div className="App">
      <MyStyled >hello react</MyStyled>
    </div>
  );
}

const MyStyled = styled.div` //스타일드 컴포넌트 작성 방법
  width: 50vw;
  height: 150px;
  padding: 10px;
  border-radius: 15px;
  color: #fff;
  &:hover: {
    background-color: #ddd;
  }
  background-color: ${(props) => (props.bgColor? "red":"purple")}; // 스타일 컴포넌트도 프롭스 정보받기 가능
`;

export default App;

 

간단하다 변수로 스타일을 저장해주고 

이렇게 저장한 변수로 감싸주면 스타일이 적용된다

  <Container>
          <Title >내 버킷리스트</Title>
          <Line/>
          {/* 컴포넌트를 넣어줍니다. */}
          {/* <컴포넌트 명 [props 명]={넘겨줄 것(리스트, 문자열, 숫자, ...)}/> */}
          <BucketList list={this.state.list} />
        </Container>

const Container = styled.div`
  max-width: 350px;
  min-height: 80vh;
  background-color: #fff;
  padding: 16px;
  margin: 20px auto;
  border-radius: 5px;
  border: 1px solid #ddd;
`;

const Title = styled.h1`
  color: slateblue;
  text-align: center;
`;

const Line = styled.hr`
  margin: 16px 0px;
  border: 1px dotted #ddd;
`;