설치하기

npm install styled-components
import styled from "styled-components";

사용방법

// App.js

const App = () => {
  return (
    <>
      <Button>Button</Button>
      <NewButton>New Button</NewButton>
    </>
  );
};

const Button = styled.button`      
  margin: 20px;
  padding: 20px;
  border: none;
  background-color: yellow;
  font-size: 20px;
`;

const NewButton = styled(Button)`  
  color: white;
  background-color: purple;
`;

export default App;

``` // Elements

Button // 1
New Button // 2

먼저 선언된 버튼의 속성을 가져오고 거기에 스타일을 더 더해서 사용하는 것도 가능하다
</br>

// App.js

import React, { useState } from 'react';
import styled, { css } from 'styled-components';

const App = () => {
const [changeColor, setChangeColor] = useState(false);

const handleChanageColor = () => {
setChangeColor(!changeColor);
};

return (
<>

Button

</>
);
}

const Button = styled.button padding: 20px; margin: 10px; border: none; background-color: ${(props) => (props.primary ? "purple" : "pink")}; // 1;

export default App;

props를 이용하여 동적으로 스타일링을 할 수 있다
</br>

// App.js

import { Link } from 'react-router-dom';
;import styled from 'styled-components';

const App = () => {
return 장바구니;
};

const CartLink = styled(Link) color: red;;

export default App;

// Elements

장바구니

Link, 아이콘 등과 같이 외부 라이브러리의 컴포넌트도 import하여 스타일리을 확장해서 사용 가능하다
</br>

import React from 'react';
import styled from 'styled-components';
import Slider from 'react-slick';
import 'slick-carousel/slick/slick.css';
import 'slick-carousel/slick/slick-theme.css';

const Main = () => {
return (

// slick 코드

);
};

const Carousel = styled(Slider) .slick-slide { // slick 커스텀 스타일 };

export default Main;

최대한 컴포넌트화 하여서 사용해야 하지만, 외부 라이브러리를 사용하여 정해진 스타일을 변경 해야 할때는 네스팅을 이용한다
</br>

// src/styles/GlobalStyle.js

import React from 'react'
import { createGlobalStyle } from 'styled-components'

const GlobalStyle = createGlobalStyle`

• {
  box-sizing: border-box;
  font-family: 'Noto Sans KR', sans-serif;
  }
  `

export default GlobalStyle;

// index.js

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

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(




);

전역에서 사용되는 css스타일은 createGlobalStyle 함수를 통해 컴포넌트를 생성할 수 있다.
</br>