styled-components

 

styled-components

기본 설정

npx create-react-app 폴더이름  // react-app 설치
npm i styled-components      // styled-components 라이브러리

 

import styled from "styled-components";

const Father = styled.div`
  display: flex;
`;

const BoxOne = styled.div`
  background-color: teal;
  width: 100px;
  height: 100px;
`;

const BoxTwo = styled.div`
  background-color: tomato;
  width: 100px;
  height: 100px;
`;

function App() {
  return (
    <Father>
      <BoxOne />
      <BoxTwo />
    </Father>
  );
}

export default App;

- styled.+ html tag + `css 코드`(백틱)
- 자동으로 클래스네임 설정해준다.

 

• props를 통해 컴포넌트 설정

const Box = styled.div`
  background-color: ${(props) => props.bgColor};
  width: 100px;
  height: 100px;
`;

function App() {
  return (
    <Father>
      <Box bgColor="teal" />
      <Box bgColor="tomato" />
    </Father>
  );
}

 

• styled(컴포넌트 이름) 를 사용해서 기존 컴포넌트를 확장

// 컴포넌트 확장
const Circle = styled(Box)`
  border-radius: 50px;
`;

function App() {
  return (
    <Father>
      <Box bgColor="teal" />
      <Circle bgColor="tomato" />
    </Father>
  );
}

 

 

• as='html tag' 를 사용해서 엘리먼트 변경 가능

// html tag 변경
const Btn = styled.button`
  color: white;
  background-color: tomato;
  border: 0;
  border-radius: 15px;
`;

function App() {
  return (
    <Father>
      <Btn>Log In</Btn>
      <Btn as="a" href="/">   // button 대신 a 태그 사용 (as="a")
        Log In
      </Btn>
    </Father>
  );
}

 

• attr 값 공통으로 전달

const Input = styled.input.attrs({ required: true, minLength: 10 })`
  background-color: tomato;
`;

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

 

• keyframe 

import styled, { keyframes } from "styled-components";

const Wrapper = styled.div`
  display: flex;
`;

const rotationAnimation = keyframes`
  0%{
    transform: rotate(0deg);
    border-radius: 0;
  }
  50%{
    border-radius: 100px;
  }
  100%{
    transform: rotate(360deg);
    border-radius: 0;
  }
`;

const Emoji = styled.span`
  font-size: 36px;
`;

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  display: flex;
  justify-content: center;
  align-items: center;
  animation: ${rotationAnimation} 1s linear infinite;

  ${Emoji}:hover {             // 컴포넌트 선택 가능
    font-size: 98px;
  }
`;

function App() {
  return (
    <Wrapper>
      <Box>
        <Emoji>😆</Emoji>
      </Box>
    </Wrapper>
  );
}

export default App;

 

• ThemeProvider를 사용해서 theme 설정

// index.js
import { ThemeProvider } from "styled-components";

const darkTheme = {
  textColor: "whitesmoke",
  backgroundColor: "#111",
};

const lightTheme = {//
  textColor: "#111",
  backgroundColor: "whitesmoke",
};

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <ThemeProvider theme={darkTheme}>
      <App />
    </ThemeProvider>
  </React.StrictMode>
);

// App.js
const Title = styled.h1`
  color: ${(props) => props.theme.textColor};
`;

function App() {
  return (
      <Title>hello</Title>
  );
}

//theme는 theme prop을 사용하여 컴포넌트로 전달될 수도 있습니다.
//ex) color: ${props => props.theme.main};