띠띠의 개발오답노트

HTML·Style/Styled Components

• Styled-components로 테마모드 변경하기(다크모드·라이트모드)

  HTML·Style/Styled Components 2023. 6. 21. 02:39

  여태 createGlobalStyle을 공통된 전역 스타일을 지정할때만 사용했다. 테마모드를 적용할 생각을 왜 못했지? theme.ts 테마를 스타일링한다. export const lightTheme = { bgColor: "#fff", textColor: "#222", accentColor: "#12cbef", }; export const darkTheme = { bgColor: "#282c35", textColor: "#fff", accentColor: "#ffe246", }; export const theme = { lightTheme, darkTheme, }; export default theme; Global.tsx styled-reset을 추가 설치가 필요하다. import { createGl..

  Read More
• [styled-components] 다른 component에 접근해서 css를 바꿔보자!

  HTML·Style/Styled Components 2023. 2. 7. 17:07

  const ChatBubbleContainer = styled.div` margin: 10px 0px 10px 0px; display: flex; `; const UtilBoxDelBtn = styled.button` display: none; ${ChatBubbleContainer}:hover & { display: block; } `;

  Read More
• [react]react-router-dom의 Link를 styled-components로 꾸미기

  HTML·Style/Styled Components 2023. 1. 25. 16:48

  일반적인 React의 컴포넌트(react-router-dom의 Link 같은)는 어떻게 styled-components로 스타일링할까? ▶ react-router-dom의 Link를 styled-components로 꾸미기 import styled from "styled-components"; import { Link } from "react-router-dom"; const StyledLink = styled(Link)` box-sizing: border-box; display: block; padding: 4px 8px; margin: 0 auto; text-align: center; `; export default function Header() { return ( Home LogIn ); } 참조..

  Read More
• [Styled Components] 전역 스타일(Global Style)과 기본 스타일(Default Theme) 관리

  HTML·Style/Styled Components 2022. 12. 21. 18:51

  💜 전역 스타일(Global Style) GlobalStyle.js import { createGlobalStyle } from "styled-components"; const GlobalStyle = createGlobalStyle` @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@500;700&display=swap"); *, *::before, *::after { margin: 0; padding: 0; list-style: none; box-sizing: border-box; } body { font-family: 'Noto Sans KR', sans-serif; } `; export default GlobalStyl..

  Read More
• [React] Styled Components 사용 방법

  HTML·Style/Styled Components 2022. 12. 15. 18:53

  Styled Components 설치하기 Styled Components는 NPM(Node Package Manager)를 통해 관리되는 패키지이기 때문에, 간단한 명령어를 통해 설치할 수 있다. $ npm i styled-components https://ddiddibbung.tistory.com/93 'edgesout' 경고와 함께 NPM 설치 실패 #3998 : Cannot read properties of null reading edgesOut styled components 이 문제를 해결하려면 styled-components의 최신 LTS v5.3.10 버전을 사용하세요. JS/JSX(JavaScript)를 사용하는 프로젝트의 경우 npm i -D styled-components@5.3.10 ..

  Read More