DBILITY

react styled component ๋ณธ๋ฌธ

front-end & ui/react

react styled component

DBILITY 2023. 4. 12. 10:54
๋ฐ˜์‘ํ˜•

 

https://styled-components.com/

 

styled-components

Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress ๐Ÿ’…๐Ÿพ

styled-components.com

์™ธ๋ถ€์— css,scss๋ฅผ ๋งŒ๋“ค๊ณ  id,class๋กœ ์ฐธ์กฐํ•˜์ง€ ์•Š๊ณ , ์ฝคํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ ์ฝคํฌ๋„ŒํŠธ๋ฅผ ์ด๋ฆ„์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ฒ˜๋Ÿผ ์ง€์ •ํ•˜๋Š” ๊ฒƒ์ด๋‹ค. ๋ง์ด ๋ณต์žกํ•˜๋‹ค. ๋‚ด๋ถ€์— ์žˆ๊ธฐ ๋•Œ๋ฌธ์— ์ „์—ญ์ ์œผ๋กœ ์ค‘์ฒฉ(๊ผฌ์ด๋Š”ใ…‹ใ…‹)๋˜์ง€ ์•Š๊ฒŒ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค. ์ด๊ฒŒ ์ „๋ถ€์ธ๊ฐ€?

์ผ๋‹จ ์„ค์น˜ํ•œ๋‹ค.

npm install styled-components

์ฝคํฌ๋„ŒํŠธ๋‚ด์—์„œ ์‚ฌ์šฉํ•  style์„ ๋Œ€์ถฉ ๋งŒ๋“ค์–ด ๋ณธ๋‹ค.

import styled from "styled-components";

const Example = (props) => {
  const bgColor = "yellow";

  const MyButton = styled.button`
    background: ${bgColor};
    color: black;
    height: 40px;
    padding: 5px;
    border-radius: 5px;
    margin-top: 10px;
  `;
  const MyBox = styled.div`
    background: grey;
    padding: 20px;
    border-radius: 5px;
    margin: 10px;
  `;

  const ExtendButton = styled(MyButton)`
    background: red;
  `;

  return (
    <div>
      <MyButton>styled component</MyButton>
      <MyBox>styled component</MyBox>
      <ExtendButton>styled component</ExtendButton>
    </div>
  );
}

 

typescript๋ฅผ ์‚ฌ์šฉํ•ด ๋ณด๋ ค๊ณ  ํ•˜๋‹ˆ type๋จผ์ € ์„ค์น˜ํ–ˆ๋‹ค

npm i -D @types/styled-components

npm i styled-components
๊ฐ€๋ณ๊ฒŒ ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋‚จ..
npm ERR! Cannot read properties of null (reading 'edgesOut')

npm i styled-components@5.3.11

ํ˜„์žฌ ์ตœ์‹  6.0.0-rc3์ด๋‹ค. ๊ทธ๋ƒฅ 5.3.11๋กœ ์„ค์น˜ํ•˜๋‹ˆ ๋œ๋‹ค.

props๋ฅผ ์—ฌ๋Ÿฌ๊ฐœ ๋ฐ›์œผ๋ ค๋ฉด interface๊ฐ€ ํ•„์š”ํ•˜๋‹ค๊ณ  ๋‹ค๋ฅธ ๋ถ„๋“ค์ด ์ ์–ด ๋†จ๋˜๋ฐ, ํ˜„์žฌ ์‹œ์ ์—

๊ทธ๋ƒฅ object type์„ ๋„ฃ์–ด๋„ ๋˜๋Š”๋ฐ? ์–ด๋””๊ฐ€ ๊ณ ์žฅ์ธ๊ฐ€?

import React, {JSX} from 'react';
import styled from "styled-components";

function Example(): JSX.Element {
  const bgColor: string = "yellow";

  const MyButton = styled.button<{ bgColor: string }>`
    background: ${props => props.bgColor};
    color: black;
    height: 40px;
    padding: 5px;
    border-radius: 5px;
    margin-top: 10px;
  `;
  const MyBox = styled.div`
    background: grey;
    padding: 20px;
    border-radius: 5px;
    margin: 10px;
  `;

  interface MyButtonInterface {
    bgColor:string,
    color:string
  }

  const ExtendButton = styled(MyButton)<MyButtonInterface>`
    background: ${props => props.bgColor};
    color: ${props => props.color};
  `;

  const ExtendButton2 = styled(MyButton)<{ bgColor:string, color:string }>`
      background: ${props => props.bgColor};
      color: ${props => props.color};
    `;

  return (
    <div>
      <MyButton bgColor={bgColor}>styled component</MyButton>
      <MyBox>styled component</MyBox>
      <ExtendButton bgColor={'red'} color={'white'}>styled component</ExtendButton>
      <ExtendButton2 bgColor={'white'} color={'red'}>styled component</ExtendButton2>
    </div>
  );
}

export default Example;

๋ญ์ง€?

๋ฐ˜์‘ํ˜•

'front-end & ui > react' ์นดํ…Œ๊ณ ๋ฆฌ์˜ ๋‹ค๋ฅธ ๊ธ€

react react-toastify  (0) 2023.06.09
react redux redux-toolkit  (0) 2023.04.13
react cors proxy  (0) 2023.03.09
react v18 UseTransition, useDeferredValue hook  (0) 2022.06.07
react file upload, dropzone  (0) 2022.04.13
Comments