วิธีต่างๆ ในการเขียน CSS ใน React PlatoBlockchain Data Intelligence ค้นหาแนวตั้ง AI.

วิธีต่างๆ ในการเขียน CSS ใน React

ประทับเวลา: 22 มิถุนายน 2022 10:24 น

เราทุกคนคุ้นเคยกับวิธีมาตรฐานของ การเชื่อมโยงสไตล์ชีต ไป <head> ของเอกสาร HTML ใช่ไหม นั่นเป็นเพียงหนึ่งในหลายๆ วิธีที่เราสามารถเขียน CSS แต่ดูเหมือนว่าการจัดรูปแบบสิ่งต่าง ๆ ในแอปพลิเคชันหน้าเดียว (SPA) พูดในโครงการ React เป็นอย่างไร

ปรากฏว่ามีหลายวิธีในการปรับแต่งแอปพลิเคชัน React บางห้องทับซ้อนกับสไตล์ดั้งเดิม บางชิ้นไม่มากนัก แต่ลองนับวิธีที่เราทำได้ทั้งหมด

กำลังนำเข้าสไตล์ชีตภายนอก

ตามชื่อที่แนะนำ React สามารถนำเข้าไฟล์ CSS กระบวนการนี้คล้ายกับที่เราเชื่อมโยงไฟล์ CSS ใน HTML <head>:

  1. สร้างไฟล์ CSS ใหม่ในไดเร็กทอรีโครงการของคุณ
  2. เขียน CSS
  3. นำเข้าสู่ไฟล์ React

อย่างนี้:

import "./style.css";

ซึ่งมักจะไปที่ด้านบนสุดของไฟล์ที่มีการนำเข้าอื่นๆ:

import { React } from "react";
import "./Components/css/App.css";
function App() {
  return (
    <div className="main">
    </div>
  );
}
export default App;

ในตัวอย่างนี้ ไฟล์ CSS จะถูกนำเข้ามาที่ an App.js จาก /Components/css โฟลเดอร์

เขียนรูปแบบอินไลน์

คุณอาจเคยชินกับการได้ยินว่าการจัดสไตล์แบบอินไลน์นั้นไม่ได้ยอดเยี่ยมสำหรับการบำรุงรักษาและอะไรก็ตามแต่มีสถานการณ์แน่นอน (นี่คือหนึ่ง!) ที่มันสมเหตุสมผล และความสามารถในการบำรุงรักษาก็ไม่ค่อยมีปัญหาใน React เนื่องจาก CSS มักจะอยู่ในไฟล์เดียวกันอยู่แล้ว

นี่เป็นตัวอย่างง่ายๆ ของการจัดสไตล์อินไลน์ใน React:

<div className="main" style={{color:"red"}}>

วิธีที่ดีกว่าคือการใช้วัตถุ:

  1. ขั้นแรก สร้างวัตถุที่มีสไตล์สำหรับองค์ประกอบต่างๆ
  2. จากนั้นเพิ่มไปยังองค์ประกอบโดยใช้ style แอตทริบิวต์แล้วเลือกคุณสมบัติที่จะจัดรูปแบบ

มาดูกันว่าในบริบท:

import { React } from "react";
function App() {
  const styles = {
    main: {
      backgroundColor: "#f1f1f1",
      width: "100%",
    },
    inputText: {
      padding: "10px",
      color: "red",
    },
  };
  return (
    <div className="main" style={styles.main}>
      <input type="text" style={styles.inputText}></input>
    </div>
  );
}
export default App;

ตัวอย่างนี้มี a styles วัตถุที่มีอีกสองวัตถุ หนึ่งรายการสำหรับ .main class และอีกอันหนึ่งสำหรับการป้อนข้อความ ซึ่งมีกฎของสไตล์ที่คล้ายกับที่เราคาดว่าจะเห็นในสไตล์ชีตภายนอก วัตถุเหล่านั้นจะถูกนำไปใช้กับ style แอตทริบิวต์ขององค์ประกอบที่อยู่ในมาร์กอัปที่ส่งคืน

โปรดทราบว่าวงเล็บปีกกาจะใช้เมื่ออ้างอิงรูปแบบมากกว่าเครื่องหมายคำพูดที่เรามักใช้ใน HTML ธรรมดา

ใช้โมดูล CSS

โมดูล CSS… เกิดอะไรขึ้นกับพวกนั้นใช่ไหม? พวกมันมีประโยชน์จากตัวแปรที่กำหนดขอบเขตในเครื่องและสามารถใช้ควบคู่ไปกับ React ได้ แต่พวกเขาคืออะไรกันแน่?

การอ้างถึง เอกสารของrepo:

โมดูล CSS ทำงานโดยรวบรวมไฟล์ CSS แต่ละไฟล์เป็น CSS และข้อมูล เอาต์พุต CSS เป็น CSS ทั่วไปทั่วไป ซึ่งสามารถฉีดโดยตรงในเบราว์เซอร์หรือต่อเข้าด้วยกันและเขียนลงในไฟล์เพื่อการใช้งานจริง ข้อมูลนี้ใช้เพื่อจับคู่ชื่อที่มนุษย์อ่านได้ที่คุณใช้ในไฟล์กับ CSS เอาต์พุตที่ปลอดภัยทั่วโลก

พูดง่ายๆ ก็คือ โมดูล CSS ช่วยให้เราใช้ชื่อคลาสเดียวกันในหลายไฟล์โดยไม่มีการขัดแย้งกัน เนื่องจากชื่อคลาสแต่ละชื่อจะมีชื่อเฉพาะทางโปรแกรม สิ่งนี้มีประโยชน์อย่างยิ่งในการใช้งานขนาดใหญ่ ทุกชื่อคลาสถูกกำหนดขอบเขตเฉพาะในองค์ประกอบที่จะถูกนำเข้า

สไตล์ชีตของโมดูล CSS นั้นคล้ายกับสไตล์ชีตปกติ โดยมีนามสกุลต่างกันเท่านั้น (เช่น styles.module.css). วิธีตั้งค่ามีดังนี้

  1. สร้างไฟล์ด้วย .module.css เป็นส่วนขยาย
  2. นำเข้าโมดูลนั้นไปยังแอป React (อย่างที่เราเห็นก่อนหน้านี้)
  3. เพิ่ม className ไปยังองค์ประกอบหรือส่วนประกอบและอ้างอิงสไตล์เฉพาะจากสไตล์ที่นำเข้า

ตัวอย่างที่ง่ายมาก:

/* styles.module.css */
.font {
  color: #f00;
  font-size: 20px;
}

import { React } from "react";
import styles from "./styles.module.css";
function App() {
  return (
    <h1 className={styles.heading}>Hello World</h1>
  );
}
export default App;

ใช้องค์ประกอบที่มีสไตล์

คุณเคยใช้ สไตล์องค์ประกอบ? เป็นที่นิยมมากและช่วยให้คุณสร้างส่วนประกอบที่กำหนดเองโดยใช้ CSS จริงใน JavaScript ของคุณ ส่วนประกอบที่มีสไตล์นั้นโดยทั่วไปแล้วจะเป็นองค์ประกอบ React พร้อม — เตรียมพร้อมสำหรับมัน — สไตล์ คุณลักษณะบางอย่างรวมถึงชื่อคลาสที่ไม่ซ้ำ สไตล์ไดนามิก และการจัดการ CSS ที่ดีขึ้น เนื่องจากแต่ละองค์ประกอบมีสไตล์ที่แยกจากกัน

ติดตั้งแพ็กเกจ npm styled-components ในบรรทัดรับคำสั่ง:

npm install styled-components

ถัดไป นำเข้าไปยังแอป React:

import styled from 'styled-components'

สร้างส่วนประกอบและกำหนดคุณสมบัติที่มีสไตล์ให้กับมัน สังเกตการใช้ตัวอักษรเทมเพลตที่แสดงโดย backticks ใน Wrapper วัตถุ:

import { React } from "react";
import styled from "styled-components";
function App() {
  const Wrapper = styled.div`
    width: 100%;
    height: 100px;
    background-color: red;
    display: block;
  `;
  return <Wrapper />;
}
export default App;

ดังกล่าวข้างต้น Wrapper คอมโพเนนท์จะแสดงผลเป็น div ที่มีสไตล์เหล่านั้น

จัดแต่งทรงผมตามเงื่อนไข

ข้อดีอย่างหนึ่งของ styled-components คือ ส่วนประกอบเองนั้นใช้งานได้ เช่นเดียวกับคุณสามารถใช้ props ภายใน CSS สิ่งนี้เปิดประตูสู่คำสั่งแบบมีเงื่อนไขและการเปลี่ยนแปลงรูปแบบตามสถานะหรือข้อเสนอ

นี่คือการสาธิตที่แสดงให้เห็นว่า:

ที่นี่ เรากำลังจัดการ div's display คุณสมบัติบนสถานะการแสดงผล สถานะนี้ถูกควบคุมโดยปุ่มที่สลับสถานะของ div เมื่อคลิก ในทางกลับกัน จะสลับไปมาระหว่างรูปแบบของสองสถานะที่แตกต่างกัน

แบบอินไลน์ if คำสั่งเราใช้ a ? แทนปกติ if/else ไวยากรณ์ ดิ else ส่วนหนึ่งอยู่หลังเครื่องหมายอัฒภาค และอย่าลืมโทรหรือใช้สถานะเสมอหลังจากที่ได้เริ่มต้นใช้งานแล้ว ในการสาธิตครั้งสุดท้ายนั้น ตัวอย่างเช่น สถานะควรอยู่เหนือ Wrapper รูปแบบของส่วนประกอบ

แฮปปี้ รีแอค จัดแต่งทรงผม!

นั่นห่อคน! เราได้พิจารณาวิธีเขียนสไตล์ต่างๆ ในแอปพลิเคชัน React ด้วยวิธีต่างๆ และไม่ใช่ว่ามีใครดีกว่าที่เหลือ แนวทางที่คุณใช้ขึ้นอยู่กับสถานการณ์แน่นอน หวังว่าตอนนี้คุณจะเข้าใจสิ่งเหล่านี้เป็นอย่างดีแล้ว และรู้ว่าคุณมีเครื่องมือมากมายในคลังแสงสำหรับการจัดสไตล์ React ของคุณ

ประทับเวลา:

เพิ่มเติมจาก เคล็ดลับ CSS