스킬 frontend

React CSS Import & Styling

React에서 CSS 적용하는 여러 방법 정리.

reactcssstylingfrontendjavascript

React에서 CSS import & styling

JS 파일에서 CSS 가져오기

import './styles.css'; // 같은 디렉토리
import '../styles/styles.css'; // 다른 디렉토리

JS 파일에 CSS import 함. 상대 경로 사용.

Inline styles

const styles = {
  backgroundColor: 'red', // camelCase
  color: 'white',
  padding: '10px'
};

function MyComponent() {
  return (
    <div style={styles}>Hello, world!</div>
  );
}

컴포넌트 안에서 스타일 객체로 직접 적용. JS 객체라 CSS 속성 camelCase로 써야 함. 재사용성 떨어지고, CSS 문법 아님. 좀 지저분함.

CSS Modules

/* styles.module.css */
.myClass {
  background-color: red;
  color: white;
  padding: 10px;
}

import styles from './styles.module.css';

function MyComponent() {
  return (
    <div className={styles.myClass}>Hello, world!</div>
  );
}

CSS 파일명 .module.css로 만들면 됨. 클래스명 자동 고유하게 생성돼서 스코프 충돌 방지. CRA 같은 환경은 기본 지원.

Styled Components

import styled from 'styled-components';

const StyledDiv = styled.div`
  background-color: red;
  color: white;
  padding: 10px;
`;

function MyComponent() {
  return (
    <StyledDiv>Hello, world!</StyledDiv>
  );
}

JS 안에서 CSS 코드 작성. styled-components 패키지 설치 필요. 태그드 템플릿 리터럴 사용해서 컴포넌트 생성.

여기서 배울 것

기본 CSS import 방법
Inline style은 JS 객체, camelCase 사용
CSS Modules로 클래스명 스코프 제한 가능
Styled Components는 CSS-in-JS 방식

원본 파일 보기 (.claude/skills/tn-react-css-import/SKILL.md)

---
name: React CSS Import 및 스타일링
description: Use when the user asks how to import and apply CSS styles in a React project, covering methods like standard import, inline styles, CSS Modules, and Styled Components.
version: 1.0.0
source: /home/son/prj/resume/backup_notes_260317/notion/Tech Note/react css import 01c701463c7e44f9bf27580c87c7f015.md
---

# react css import

conc

![Screen Shot 2023-02-28 at 7.33.55 PM.png](react%20css%20import/Screen_Shot_2023-02-28_at_7.33.55_PM.png)

[https://goddaehee.tistory.com/304](https://goddaehee.tistory.com/304)

# React CSS Import

## Importing CSS

To import CSS in React, you can use the `import` statement in your JavaScript file. For example, let's say you have a CSS file named `styles.css` in the same directory as your JavaScript file. You can import it like this:

```
import './styles.css';

```

You can also import CSS from a different directory. For example:

```
import '../styles/styles.css';

```

## Using CSS

Once you have imported your CSS file, you can use it in your React components. There are several ways to do this:

### Inline styles

```
const styles = {
  backgroundColor: 'red',
  color: 'white',
  padding: '10px'
};

function MyComponent() {
  return (
    <div style={styles}>Hello, world!</div>
  );
}

```

### CSS Modules

CSS Modules are a way to locally scope CSS by automatically generating unique class names. To use CSS Modules in React, you need to enable them in your webpack configuration file. Once enabled, you can import CSS files as modules and use them in your components. For example:

```
/* styles.module.css */

.myClass {
  background-color: red;
  color: white;
  padding: 10px;
}

```

```
import styles from './styles.module.css';

function MyComponent() {
  return (
    <div className={styles.myClass}>Hello, world!</div>
  );
}

```

### Styled Components

Styled Components are a way to write CSS in JavaScript using tagged template literals. To use Styled Components in React, you need to install the `styled-components` package. Once installed, you can create styled components by defining a template literal and passing it to the `styled` function. For example:

```
import styled from 'styled-components';

const StyledDiv = styled.div`
  background-color: red;
  color: white;
  padding: 10px;
`;

function MyComponent() {
  return (
    <StyledDiv>Hello, world!</StyledDiv>
  );
}

```

## Conclusion

In this document, we have covered different ways to import and use CSS in React. Choose the method that best suits your needs and have fun styling your React components!