tiktok นับยอดวิวยังไง

ในการเพิ่ม CSS ใน javascript file ใน Next.js คุณสามารถทำได้ดังนี้:

1. สร้างไฟล์ CSS ใหม่

ไฟล์นี้จะใช้เก็บ CSS ทั้งหมดของคุณ

touch styles.css

2. เพิ่ม CSS ลงในไฟล์ CSS

body {
  background-color: #ffffff;
  color: #000000;
}

h1 {
  font-size: 24px;
}

p {
  font-size: 16px;
}

3. นำเข้าไฟล์ CSS ลงในไฟล์ JavaScript

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

const App = () => {
  return (
    <div>
      <h1 style={styles.h1}>Hello, world!</h1>
      <p style={styles.p}>This is a paragraph.</p>
    </div>
  );
};

export default App;

เมื่อคุณ render ไฟล์ React component นี้ หน้าเว็บของคุณจะมีพื้นหลังสีขาว สีตัวอักษรเป็นสีดำ หัวเรื่องขนาด 24px และย่อหน้าขนาด 16px

คุณยังสามารถใช้ CSS Modules เพื่อเพิ่ม CSS ลงในไฟล์ JavaScript ได้อีกด้วย ในการทำเช่นนี้ คุณจะต้องเปลี่ยนนามสกุลไฟล์ CSS เป็น .module.css

ตัวอย่างเช่น:

touch styles.module.css

.my-button {
  background-color: red;
  color: white;
}

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

const Button = () => {
  return (
    <button className={styles.my-button}>
      Click me!
    </button>
  );
};

export default Button;

เมื่อคุณ render ไฟล์ React component นี้ ปุ่มจะมีพื้นหลังสีแดงและสีตัวอักษรเป็นสีขาว