스타일드 컴포넌트 공부

import styled from 'styled-components';

function App() {
  return (
    <Father>
      {/* styledComponents에 props내려주기 */}
      <Box bgColor="teal" />
      <Circle bgColor="tomato" />
    </Father>
  );
}

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

const Box = styled.div`
  width: 100px;
  height: 100px;
  //내려받은 props로 style 설정하기
  background-color: ${({ bgColor }) => bgColor};
`;

//타 styledComponents를 상속하고, 새로운 styled을 입력하기
const Circle = styled(Box)`
  border-radius: 50px;
`;

export default App;

---

import styled from 'styled-components';

function App() {
  return (
    <Father>
      <Btn>Login</Btn>
      {/* as속성은 태그를 내려준다.
      스타일이 특정 styledComponents와 같은데
      태그를 다른걸 쓰고싶다면 as='~~'를 사용하여 태그를 설정한다. */}
      <Btn as="a">Login</Btn>
    </Father>
  );
}

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

const Btn = styled.button`
  color: white;
  background-color: tomato;
  border: 0;
  border-radius: 15px;
`;

export default App;

 

 

a태그를 쓴다면 href도 똑같이 넣을 수 있음

---

import styled from 'styled-components';

function App() {
  return (
    <Father as="header">
      <Input required />
      <Input required />
      <Input required />
      <Input required />
      <Input required />
    </Father>
  );
}

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

const Input = styled.input`
  background-color: tomato;
`;

export default App;

input태그에 required가 필요할 때 이렇게 다 넣을 필요 없이

styled-components를 정의할 때 뒤에 .attrs( { required : true } )를 입력하면 된다.

import styled from 'styled-components';

function App() {
  return (
    <Father as="header">
      <Input />
      <Input />
      <Input />
      <Input />
      <Input />
    </Father>
  );
}

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

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

export default App;

똑같이 적용된 모습이다.

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

이렇게 또 다른 속성도 attrs안에 객체형식으로 다양하게 넣을 수 있다.

---

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

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

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

//styledComponents에서 keyframes를 사용할 시 classname처럼 무작위 이름의 animation이 생성됨
const rotateAnimation = keyframes`
  0% {
    transform:rotate(0deg);
    border-radius: 0px;
  }
  50% {
    border-radius: 100px;
  }
  100%{
    transform:rotate(360deg);
    border-radius: 0px;
  }
`;

const Box = styled.div`
  height: 200px;
  width: 200px;
  background-color: tomato;
  animation: ${rotateAnimation} 1s linear infinite;
`;

export default App;

styled-components의 keyframes를 import해와서 만들 animation을 만들어주고

적용할 컴포넌트에 animation: ~~~으로 적용을 해준다.

 

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

이렇게 Box라는 스타일드컴포넌트 내부의 span에도 접근하여 style을 변경할 수 있음

 

const Box = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  width: 200px;
  background-color: tomato;
  animation: ${rotateAnimation} 1s linear infinite;
  span {
    font-size: 36px;
    &:hover{
      font-size: 40px;
    }
  }
  span:hover{
    font-size: 40px;
  }
`;

hover을 사용하는 방법은 위와같이 두가지 방법이있음

 

---

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

function App() {
  return (
    <Wrapper>
      <Box>
        <Emoji as="whatever">😊</Emoji>
      </Box>
    </Wrapper>
  );
}

const Wrapper = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
`;

//styledComponents에서 keyframes를 사용할 시 classname처럼 무작위 이름의 animation이 생성됨
const rotateAnimation = keyframes`
  0% {
    transform:rotate(0deg);
    border-radius: 0px;
  }
  50% {
    border-radius: 100px;
  }
  100%{
    transform:rotate(360deg);
    border-radius: 0px;
  }
`;

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

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

export default App;

위와같이 Box 컴포넌트 내부의 Emoji라는 styled component에 접근하여 style을 바꿀 수도 있다.

이렇게 하면 Emoji에서 as='~~"을 사용해 어떤 태그로 변경하더라도 Emoji라는 태그에 적용되기때문에 style이 적용된다.

---

theme은 모든 색을 가지고있는 객체, 다크모드 만들떄 씀

import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from 'styled-components';
import App from './App';

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>
);

index.js에서 theme을 만들고, styled-components에서 ThemeProvider을 import해온다.

그리고 <App />을 ThemeProvider로 감싸고 theme이라는 이름으로 prop를 내려준다.

이때 다크모드와 라이트모드의 내부 구성은 같아야한다.