React : 스타일 넣어주기 styled-components 사용법 , style 에 props 전달 , 전역 스타일 설정

React : 스타일 넣어주기 styled-components 사용법 , style 에 props 전달 ,  전역 스타일 설정

 

 

 

 

 

1. styled-components 설치하기

npm i styled-components

styled-components는 react를 사용하면서 css파일이 아닌 하나의 태그자체에 속성을 주고, 여러번 재사용할 수 있도록 해준다. styled-components를 사용하면 삼항식이나 여러가지 효과를 적용하고 속성을 줄 때 손쉽게 접근할 수 있다.

👇 styled-components 사이트
https://styled-components.com/

 

 

2. styled 전용 jsx 파일 만들어 사용하기

1 . style을 저장할 jsx 파일을 하나 만들다
2. import styled from "styled-components"; => styled-components를 불러온다
3. const 항목 내에 스타일을 넣어준다

👉 ** Styled.jsx**

import styled from "styled-components";

const StyledButton = styled.button`
  background-color: red;
  // color: white;
  font-size: 20px;
  padding: 0.25em 6em;
  border: solid 2px pink;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 10px;
  `;

export default StyledButton;

이제 App.js로 돌아가 Styled를 넣어준다

 

 

👉 App.js

import Styled from "./components/Styled";

function App() {
  return (
    <div className="App">
       <Styled>버튼</Styled>
    </div>
  );
}

Styled 안에 적용된 style을 받을 수 있다.

이 경우를 사용할 경우, 때에 따라서 Styled의 색상값을 임의대로 넣고싶을때가 있다.
그럴때는 props를 활용해 Styled.jsx 파일 내부에서 설정해주는것이 가능하다

 

 

 

👉 ** Styled.jsx**

import styled, { css } from "styled-components"; //css 추가

const StyledButton = styled.button`
  background-color: red;
  // color: white;
  font-size: 20px;
  padding: 0.25em 6em;
  border: solid 2px pink;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 10px;
  ${(props) =>
    props.primary && //primary 가 존재할 경우
    css`
      background-color: white;
      color: black;
    `}
  `;

export default StyledButton;

이제 App.js로 돌아가 Styled를 넣어준다

 

 

 

👉 App.js

import Styled from "./components/Styled";

function App() {
  return (
    <div className="App">
       <Styled>버튼</Styled>
       <Styled primary>버튼</Styled> //primary를 props로 전달
    </div>
  );
}

 

 

 

3. App.js 내부에서 바로 사용하기

App.js 나 다른 jsx파일 내부에 const로 바로 스타일을 지정해줄 수 있다.

👉** App.js**

import styled from "styled-components";

//스타일 설정
const PrimaryStyledButton = styled(StyledButton)`
  background-color: pink;
  color: black;
`;

//적용
function App() {
  return (
    <div className="App">
       <PrimaryStyledButton>버튼</PrimaryStyledButton>
    </div>
  );
}

 

 

3. 태그에 속성값을 넣어주기

스타일 적용된 태그에 속성값을 넣어준다

예시) div 요소에 a 항목을 추가로 넣고싶은 경우

👉 ** Styled.jsx**

import styled, { css } from "styled-components"; //css 추가

const StyledButton = styled.button`
  background-color: red;
  // color: white;
  font-size: 20px;
  padding: 0.25em 6em;
  border: solid 2px pink;
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 10px;
  ${(props) =>
    props.primary && //primary 가 존재할 경우
    css`
      background-color: white;
      color: black;
    `}
  `;

export default StyledButton;

 

 

👉 App.js

import Styled from "./components/Styled";

function App() {
  return (
    <div className="App">
       <Styled as="a" href="/">버튼</Styled>   //a태그로 바꾸고 href로 이동
    </div>
  );
}

예시) 태그를 바꾸고 속성값도 추가하고 싶은 경우

👉 App.js

import Styled from "./components/Styled"; //위 예시와 같은 컴포넌트 import

//바꿔줄 속성 정의
const Change = (props) => (
  <button {...props} children={props.children.속성값} /> 
);

function App() {
  return (
    <div className="App">
       <Styled as={Change} href="/">버튼</Styled>
    </div>
  );
}

예시) 예를 들어 a태그로 이동시 새창으로 띄우고 싶은 경우 (기본 설정 변경)

 

 

👉 App.js

import styled from "styled-components";

//style파일로 import 해줘도 된다

const StyledA = styled.a.attrs((props) => ({
  target: "_BLANK",  //새창 열기 설정
}))` //백킷기호 필수!
color: ${(props) => props.color}; //여기는 스타일을 따로 넣어주면 된다!
`;


function App() {
  return (
    <div className="App">
       <StyledA color="pink" href="https://naver.com">
            버튼
       </StyledA>
    </div>
  );
}

props값을 받아, 스타일을 유동적으로 조절하고 싶을때

예시) color값을 가진 경우 pink, color가 없을경우 blue로 설정

👉 App.js

import styled from "styled-components";

//스타일 설정
const StyledMyButton = styled(MyButton)`
  background-color: red;
  color: ${(props) => props.color || "blue"}; //props 활용
  font-size: 20px;
  padding: 0.25em 6em;
  border: solid 2px ${(props) => props.color || "blue"};  //props 활용
  cursor: pointer;
  border-radius: 5px;
  margin-bottom: 10px;
  :hover {
    border: solid 3px red;
  }
  ::before {
    content: "22";
  }
`;

function App() {
  return (
    <div className="App">
       <StyledMyButton color="pink"> 
            버튼
       </StyledMyButton>
    </div>
  );
}

전역스타일 설정

styled-components 인 createGlobalStyle을 활용해 전역스타일을 지정해줄 수 있다.

👉 App.js

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

//전역스타일 지정
const GlobalStyle = createGlobalStyle`
button {
  color : yellow;
}

function App() {
  return (
    <div className="App">
       <GlobalStyle />  //전역스타일 제일 상단에 적용 기존 css에 reset 과 같이 사용할 수 있다.
       <StyledMyButton color="pink"> 
            버튼
       </StyledMyButton>
    </div>
  );
}

`;