Cara menambah CSS pada Komponen Reaksi anda

Adakah anda buntu tentang cara membuat komponen anda mengambil gaya yang menakjubkan itu? Jangan risau lagi, di sini kami akan membincangkan tiga cara yang akan membantu anda melaksanakan reka bentuk cantik anda. Adalah baik jika anda mempunyai sedikit pemahaman tentang CSS dan Javascript semasa membaca artikel ini. Jom terjun!

1. Menggunakan helaian gaya CSS.

Ini melibatkan menulis gaya CSS anda sendiri dalam fail berasingan dan kemudian mengimportnya ke dalam komponen anda.
Ingat untuk menggunakan sambungan .css apabila menamakan fail. Semak contoh kod di bawah.

//Fail CSS anda

body {
  background-color: #282c34;
  color: white;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

//Import fail CSS anda ke komponen anda.
// Anda memberikan nama pilihan anda kepada fail CSS.

import './App.css';

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1>Hello Style!</h1>
      <p>Add a little style!.</p>
      </div>
    );

}
}

1. Menggunakan modul CSS

Mungkin anda tidak menyukai kaedah pertama, atau mungkin ia tidak sesuai dengan cara anda menulis kod.
Anda boleh menggunakan kaedah kedua kami. Di sini anda juga akan membuat fail berasingan di mana anda akan menulis CSS anda tetapi kali ini dengan sambungan yang berbeza; .modul.css

// Modul CSS anda.
// mystyle.module.css

.bigblue {
  color: DodgerBlue;
  padding: 40px;
  font-family: Arial;
  text-align: center;
}

//Import modul ke komponen anda.

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

class Car extends React.Component {
  render() {
    return <h1 className={styles.bigblue}>Hello Car!</h1>;
  }
}

1. Menggunakan Penggayaan Sebaris

Seseorang boleh mencapai penggayaan sebaris menggunakan gaya atribut style='styles here' Walau bagaimanapun, seseorang itu perlu berhati-hati kerana apa sahaja yang berlaku dalam atribut gaya kerana nilai bukanlah pemilih CSS biasa anda tetapi objek javascript, dan oleh itu, ia harus mengambil sintaks objek.

Ini yang saya maksudkan;

class MyHeader extends React.Component {
  render() {
    return (
      <div>
      <h1 style={{color: "red"}}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Perhatikan pendakap kerinting berganda, juga, perhatikan kunci: sintaks pasangan nilai yang digunakan untuk menulis objek javascript.

Sesuatu yang perlu diingat ialah apabila menulis sifat benda yang mempunyai dua nama contohnya warna latar belakang, satu diperlukan untuk menggunakan camelCase backgroundColor

Petua: Anda boleh mencipta objek dengan semua kod penggayaan anda dan memanggilnya dalam atribut gaya.

class MyHeader extends React.Component {
  render() {
    const mystyle = {
      color: "white",
      backgroundColor: "DodgerBlue",
      padding: "10px",
      fontFamily: "Arial"
    };
    return (
      <div>
      <h1 style={mystyle}>Hello Style!</h1>
      <p>Add a little style!</p>
      </div>
    );
  }
}

Perhatikan ketiadaan pendakap kerinting berganda.

Saya harap ini bermanfaat dan anda seronok membacanya. Saya mengalu-alukan maklum balas supaya saya menambah baik artikel saya seterusnya menulis. Terima kasih

Atas ialah kandungan terperinci Cara menambah CSS pada Komponen Reaksi anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!