Blog Image

Per ardua ad astra.

"Hello, World!" 🤖

  • 🚀
  • 🏷️
  • 📒
  • 🛠️
  • 📝
250x250
All Categories
  • Category 📙 (707)
    • Programming (199)
      • C (3)
      • C++ (14)
      • C# (0)
      • Python (23)
      • SQL (7)
      • HTML (1)
      • CSS (2)
      • JavaScript (21)
      • TypeScript (14)
      • Node.js (11)
      • React (70)
      • React Native (29)
      • Dart (0)
      • Flutter (0)
      • Android (4)
      • Electron (0)
    • Framework (41)
      • PyQt (17)
      • Next.js (14)
      • Vue (0)
      • Tailwind CSS (10)
    • Library (7)
      • Bootstrap (0)
      • Styled-Components (1)
      • Zustand (1)
      • Axios (4)
      • Three.js (1)
    • Database (6)
      • Database (2)
      • PostgreSQL (1)
      • MySQL (0)
      • MongoDB (1)
      • Firebase (0)
      • Redis (2)
    • DevOps (53)
      • Git (5)
      • Testing (2)
      • Cloud (1)
      • Docker (6)
      • Kubernetes (2)
      • Azure (31)
      • AWS (0)
      • Service (6)
    • Computer Science (39)
      • 알고리즘 (24)
      • 자료구조 (10)
      • 컴퓨터구조 (0)
      • 개념 정리 (5)
    • Operating System (1)
      • Linux (1)
      • MacOS (0)
    • Problem Solving (220)
      • BOJ (192)
      • Programmers (3)
      • SWEA (25)
      • LeetCode (0)
    • Mathematics (72)
      • 이산 수학 (43)
      • 확률과 통계 (29)
      • 선형대수학 (0)
      • 미분적분학 (0)
    • Artificial Intelligence (4)
      • Data Science (4)
      • Machine Learning (0)
      • Deep Learning (0)
    • Certificate (39)
      • 리눅스마스터 (17)
      • 네트워크관리사 (2)
      • 정보처리기사 (1)
      • 빅데이터분석기사 (13)
      • 정보보안기사 (0)
      • 경영정보시각화능력 (0)
      • SQLD (6)
      • COS Pro (0)
    • Study (9)
      • Network (6)
      • Programming (2)
      • DApp (1)
      • MS Learn (0)
    • Tools (7)
      • VS Code (6)
    • ETC. (10)
      • Job Preparation (4)
      • Activity (1)
      • Information (1)
      • Tip (4)
«   2025/12   »
일 월 화 수 목 금 토
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
00:00:00
00:00:00
/ /
250x250

📅

D-Day
Microsoft Student (2023)👨🏻‍💻

Library/Styled-Components


728x90
728x90
  • - [Styled-Components] 외부 컴포넌트 라이브러리의 UI 컴포넌트 스타일을 직접 수정하는 방법

    외부 컴포넌트 라이브러리의 UI 컴포넌트 스타일을 직접 수정하는 방법들어가며@antd@ 등 외부 컴포넌트 라이브러리의 UI 컴포넌트를 Styled-Components를 이용하여 직접 수정하는 방법을 정리해본다. 방법스타일 파일(@컴포넌트명.style.js@)이나 컴포넌트 파일(@컴포넌트명.js/jsx/tsx@)에서 다음과 같이 코드를 작성하고 변경/추가하고자 하는 스타일을 넣어주면 된다.import styled from "styled-components";import { 외부컴포넌트명 } from "외부_컴포넌트_라이브러리_패키지";export const 커스텀외부컴포넌트명 = styled(외부컴포넌트명)` 속성: 값;`; 그리고 다른 일반적인 Styled-Components 요소처럼 사용하면 된다.i..

    1 2024.10.23


728x90
728x90

PREV 1 NEXT
Powered by Tistory, Designed by 👨🏻‍🚀adastra

티스토리툴바