4 ไลบรารีส่วนประกอบที่ไม่มีสไตล์ที่ดีที่สุดสำหรับการสร้างแอป React ที่ปรับแต่งได้

ผู้อ่านเช่นคุณช่วยสนับสนุน MUO เมื่อคุณทำการซื้อโดยใช้ลิงก์บนเว็บไซต์ของเรา เราอาจได้รับค่าคอมมิชชั่นจากพันธมิตร อ่านเพิ่มเติม.

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

ไลบรารีคอมโพเนนต์ Unstyled คืออะไร?

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

ประโยชน์ของไลบรารีคอมโพเนนต์ที่ไม่มีสไตล์

ต่อไปนี้คือข้อดีบางประการของการใช้ไลบรารีคอมโพเนนต์ที่ไม่มีสไตล์:

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

1. Radix UI

Radix UI เป็นไลบรารีคอมโพเนนต์ที่ไม่มีสไตล์ซึ่งเน้นที่การเข้าถึง มีชุดองค์ประกอบ UI ที่ออกแบบมาเพื่อให้ผู้ใช้ทุกคนสามารถเข้าถึงได้ คุณสามารถ สร้างแอป React ที่สวยงามโดยใช้ Radix UI .

เมื่อทำงานกับ Radix UI คุณสามารถติดตั้งส่วนประกอบแต่ละส่วนที่คุณต้องการแทนการติดตั้งไลบรารีทั้งหมดได้ สิ่งนี้ช่วยให้แน่ใจว่าคุณทำให้แอปพลิเคชันของคุณมีน้ำหนักเบา

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

npm install @radix-ui/react-accordion

หลังจากติดตั้งส่วนประกอบหีบเพลงแล้ว คุณสามารถสร้างหีบเพลงในแอป React ได้

นี่คือตัวอย่างวิธีใช้ส่วนประกอบหีบเพลง:

import React from "react" 
import * as Accordion from "@radix-ui/react-accordion" 
 
export default function App() { 
  return ( 
    <div> 
      <Accordion.Root type="single" defaultValue="item-1" collapsible> 
        <Accordion.Item value="item-1"> 
          <Accordion.Trigger>Is this accordion unstyled?</Accordion.Trigger> 
          <Accordion.Content>Yes. It is unstyled.</Accordion.Content> 
        </Accordion.Item> 
      </Accordion.Root> 
    </div> 
  ) 
}

บล็อกโค้ดด้านบนจะตั้งค่าส่วนประกอบหีบเพลงแบบไม่มีสไตล์ขั้นพื้นฐานโดยใช้ @ Radix-ui/react-หีบเพลง ไลบรารีช่วยให้สามารถรายการแบบยุบได้พร้อมเนื้อหาที่ปรับแต่งได้

รหัสจะสร้างหีบเพลงที่มีลักษณะดังนี้:

2. ตอบโต้อาเรีย

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

Adobe พัฒนาและดูแลรักษาไลบรารี React Aria ไลบรารีนี้เป็นส่วนหนึ่งของ Adobe Spectrum Design System ที่กว้างขวางยิ่งขึ้น ซึ่งมีแนวทางการออกแบบและทรัพยากรที่ครอบคลุมสำหรับการสร้างอินเทอร์เฟซผู้ใช้ที่สามารถเข้าถึงได้ องค์ประกอบที่จัดทำโดยไลบรารี React Aria นั้นไม่มีสไตล์ ช่วยให้คุณปรับแต่งองค์ประกอบให้เหมาะกับความต้องการของคุณได้

หากต้องการใช้ React Aria ในแอปพลิเคชัน React ให้ติดตั้งโดยเรียกใช้คำสั่งต่อไปนี้:

npm install react-aria

นี่คือตัวอย่างวิธีการสร้างส่วนประกอบปุ่มโดยใช้ ใช้ปุ่ม ตะขอ:

import React from 'react' 
import {useButton} from 'react-aria'; 
 
function Button(props: any) { 
  let ref = React.useRef(null); 
  let { buttonProps } = useButton(props, ref); 
 
  return ( 
    <button {...buttonProps} ref={ref}> 
      {props.children} 
    </button> 
  ); 
} 
 
export default Button;

ตอนนี้คุณสามารถนำเข้าและแสดงผลไฟล์ ปุ่ม ส่วนประกอบในส่วนประกอบอื่นๆ ที่คุณเลือก

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

import React from 'react' 
import Button from './Button'; 
 
function App() { 
  return ( 
    <Button>Click Me</Button> 
  ); 
} 
 
export default App;

เมื่อคุณสร้างโค้ดบล็อกด้านบน มันจะสร้างปุ่มธรรมดาที่มีลักษณะดังนี้:

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

3. UI พื้นฐาน

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

windows 10 คีย์ windows ไม่ทำงาน

คุณสามารถติดตั้ง Base UI ในแอปพลิเคชัน React ของคุณด้วยคำสั่งนี้:

npm install @mui/base

Base UI มีส่วนประกอบต่างๆ อยู่เสมอ ซึ่งหมายความว่าคุณสามารถนำเข้าและใช้ส่วนประกอบจากไลบรารีได้โดยตรง นอกจากนี้ยังมี hooks ที่คุณสามารถใช้เพื่อสร้างและกำหนดค่าส่วนประกอบของคุณ

นี่คือตัวอย่างการใช้ส่วนประกอบ Base UI:

import React from "react"; 
import Button from "@mui/base/Button"; 
 
export default function App() { 
  return ( 
    <div> 
      <Button>Click Me</Button> 
    </div> 
  ); 
}

รหัสนี้สร้างปุ่มง่ายๆ โดยใช้ ปุ่ม ส่วนประกอบของไลบรารี Base UI คุณยังสามารถใช้ ใช้ปุ่ม ขอเพื่อทำงานเดียวกัน

import React from "react"; 
import useButton from "@mui/base/useButton"; 
 
export default function App() { 
  const { getRootProps } = useButton(); 
 
  return ( 
    <div> 
      <button {...getRootProps()}>Click Me</button> 
    </div> 
  ); 
}

ที่ ใช้ปุ่ม ตะขอและ ปุ่ม ส่วนประกอบจะสร้างปุ่มที่ไม่มีสไตล์ดังที่แสดงในภาพด้านล่าง

4. UI ที่ไม่มีหัว

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

คุณสามารถติดตั้งไลบรารีโดยใช้คำสั่งต่อไปนี้:

npm install @headlessui/react

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

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

import React from "react"; 
import { Popover } from "@headlessui/react"; 
 
export default function App() { 
  return ( 
    <div> 
      <Popover> 
        <Popover.Button>Popover</Popover.Button> 
 
        <Popover.Panel> 
          <p>This is a Popover</p> 
        </Popover.Panel> 
      </Popover> 
    </div> 
  ); 
}

ในตัวอย่างนี้ คุณสร้างป๊อปโอเวอร์โดยใช้ ป๊อปโอเวอร์ ส่วนประกอบจากไลบรารี Headless UI บล็อกโค้ดด้านบนจะสร้างป๊อปโอเวอร์ที่มีลักษณะเช่นนี้

ควบคุมได้อย่างสมบูรณ์ด้วยส่วนประกอบที่ไม่มีสไตล์

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