Add Css In Javascript Lwc

MUAZHAN

5 min read

·

Jun 22, 2024

25

Share

Menambahkan CSS di Lightning Web Components (LWC)

Lightning Web Components (LWC) adalah cara modern untuk membangun antarmuka pengguna yang dinamis dan interaktif di Salesforce. LWC menawarkan fleksibilitas dan kekuatan untuk mengendalikan tampilan komponen Anda. Salah satu cara untuk mengendalikan tampilan adalah dengan menambahkan CSS ke komponen LWC Anda.

Ada tiga cara utama untuk menambahkan CSS ke komponen LWC:

1. Menggunakan Stylesheet Global

Anda dapat menambahkan CSS ke komponen LWC Anda menggunakan stylesheet global. Ini adalah cara yang mudah untuk mengaplikasikan gaya ke seluruh komponen Anda.

Langkah-langkah:

1. Buat file CSS dengan ekstensi .css di folder styles pada komponen Anda.
2. Import file CSS ke dalam file JavaScript komponen Anda menggunakan import.
3. Gunakan @api decorator untuk membuat properti untuk mengambil stylesheet global dan gunakan property tersebut sebagai style di tag template.

Contoh:

styles/myComponent.css

.my-class {
  color: red;
  font-size: 20px;
}

myComponent.js

import { LightningElement, api } from 'lwc';
import myComponentStyle from './myComponent.css';

export default class MyComponent extends LightningElement {
  @api stylesheet;

  get styles() {
    return `${myComponentStyle} ${this.stylesheet || ''}`;
  }
}

myComponent.html

2. Menggunakan Stylesheet Lokal

Anda dapat menambahkan CSS ke komponen LWC Anda menggunakan stylesheet lokal. Ini adalah cara yang baik untuk mengaplikasikan gaya ke komponen tertentu.

Langkah-langkah:

1. Tambahkan tag <template> ke dalam file JavaScript komponen Anda.
2. Gunakan tag <style> di dalam tag <template> untuk mendefinisikan stylesheet lokal.

Contoh:

myComponent.js

import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
  connectedCallback() {
    console.log('Connected Callback');
  }
}

myComponent.html

3. Menggunakan CSS Modules

CSS Modules adalah cara untuk membatasi ruang lingkup CSS Anda, sehingga Anda tidak perlu khawatir tentang konflik gaya dengan komponen lain.

Langkah-langkah:

1. Buat file CSS dengan ekstensi .css di folder styles pada komponen Anda.
2. Tambahkan @module di atas file CSS.
3. Import file CSS ke dalam file JavaScript komponen Anda menggunakan import.
4. Gunakan nama kelas yang dihasilkan dari CSS Modules di tag template.

Contoh:

styles/myComponent.css

@module
.my-class {
  color: red;
  font-size: 20px;
}

myComponent.js

import { LightningElement } from 'lwc';
import myComponentStyle from './myComponent.css';

export default class MyComponent extends LightningElement {
  get styles() {
    return myComponentStyle;
  }
}

myComponent.html

Penjelasan Lebih Lanjut

• Stylesheet Global: Sangat ideal untuk gaya dasar yang ingin diterapkan di seluruh aplikasi LWC. Ini menawarkan pengaturan sederhana dan memudahkan perubahan gaya secara terpusat.
• Stylesheet Lokal: Lebih cocok untuk gaya spesifik komponen yang tidak perlu dibagikan dengan komponen lain. Ini menjaga gaya tetap teratur dan terstruktur.
• CSS Modules: Solusi yang kuat untuk menghentikan kebocoran gaya. Ini memastikan bahwa gaya unik untuk setiap komponen dan mencegah konflik di antara komponen.

Pilih metode yang paling sesuai dengan kebutuhan Anda dan nikmati fleksibilitas dalam mengendalikan tampilan komponen LWC Anda.