React에서 css 적용하는 방법

1. 요소에 style 지정해주기(Inline CSS)

- style{{쓰고싶은 것}}

<a style={{ textDecoration: 'none' }} href="#">링크</a>
<a href='#' style={{ marginLeft: '10px', textDecoration: 'none'}} onClick={() => handleEditCommentClick(comment)}>수정</a>)}

 

2. 모듈

- 컴포넌트마다 고유한 스타일을 유지하고 적용할 수 있다.

// Button.module.css
.link {
  text-decoration: none;
}

// Component.jsx
import React from 'react';
import styles from './Button.module.css';

const Component = () => {
  return (
    <a className={styles.link} href="#">링크</a>
  );
}

export default Component;

/* custom-quill-styles.css */

/* Quill 에디터 컨테이너 스타일 */
.quill-container {
    height: 500px; /* 전체 높이를 500px로 고정 */
  }
  
  /* Quill 에디터 내의 편집 영역 스타일 */
  .ql-editor {
    min-height: 450px; /* 편집 영역의 최소 높이를 500px로 고정 */
    max-height: 450px; /* 편집 영역의 최대 높이도 500px로 고정 */
    overflow-y: auto; /* 내용이 넘칠 경우 스크롤 표시 */
  }

 

3. 스타일 컴포넌트

- JavaScript를 사용하여 스타일을 정의하고 컴포넌트에 적용한다.

import React from 'react';
import styled from 'styled-components';

const Link = styled.a`
  text-decoration: none;
`;

const Component = () => {
  return (
    <Link href="#">링크</Link>
  );
}

export default Component;

 

4. Global Css

전역 스타일을 설정한 후 모든 컴포넌트에 적용한다.

// styles.css
a {
  text-decoration: none;
}

// Component.jsx
import React from 'react';
import './styles.css';

const Component = () => {
  return (
    <a href="#">링크</a>
  );
}

export default Component;