React.js praktik terbaik gaya inline

Saya sadar bahwa Anda dapat menentukan gaya dalam kelas Bereaksi, seperti ini:

var MyDiv = React.createClass({
  render: function() {
    var style = {
      color: 'white',
      fontSize: 200
    };

    return <div style={style}> Have a good and productive day! </div>;
  }
});

Haruskah saya bertujuan melakukan semua gaya dengan cara ini, dan tidak memiliki gaya yang ditentukan dalam file CSS saya?

Atau haruskah saya menghindari gaya sebaris sepenuhnya?

Tampaknya aneh dan berantakan untuk melakukan sedikit dari keduanya - dua tempat perlu diperiksa ketika mengutak-atik styling.

Belum ada banyak "Praktik Terbaik". Kita yang menggunakan gaya inline, untuk komponen Bereaksi, masih sangat banyak bereksperimen.

Ada sejumlah pendekatan yang sangat bervariasi: Bereaksi bagan perbandingan lib inline-style

Semua atau tidak?

Apa yang kami sebut sebagai "gaya" sebenarnya mencakup beberapa konsep:

• Layout - bagaimana elemen / komponen terlihat dalam hubungan dengan orang lain
• Penampilan - karakteristik elemen / komponen
• Perilaku dan status - bagaimana elemen / komponen terlihat dalam keadaan tertentu

Mulai dengan gaya-negara

Bereaksi sudah mengelola keadaan komponen Anda, ini membuat gaya keadaan dan perilaku cocok untuk colocation dengan logika komponen Anda.

Alih-alih membangun komponen untuk dirender dengan kelas-negara bersyarat, pertimbangkan untuk menambahkan gaya-negara secara langsung:

// Typical component with state-classes
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })} />


// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

Perhatikan bahwa kita menggunakan kelas untuk gaya penampilan tetapi tidak lagi menggunakan .is-kelas diawali untuk negara dan perilaku .

Kami dapat menggunakan Object.assign(ES6) atau _.extend(garis bawah / lodash) untuk menambahkan dukungan untuk beberapa negara:

// Supporting multiple-states with inline-styles
<li 'todo-list__item'
 style={Object.assign({}, item.complete && styles.complete, item.due && styles.due )}>

Kustomisasi dan usabilitas ulang

Sekarang kita menggunakannya Object.assignmenjadi sangat sederhana untuk membuat komponen kita dapat digunakan kembali dengan gaya yang berbeda. Jika kita ingin mengganti gaya default, kita dapat melakukannya pada panggilan-situs dengan alat peraga, seperti jadi: <TodoItem dueStyle={ fontWeight: "bold" } />. Diimplementasikan seperti ini:

<li 'todo-list__item'
 style={Object.assign({},
         item.due && styles.due,
         item.due && this.props.dueStyles)}>

Tata letak

Secara pribadi, saya tidak melihat alasan kuat untuk gaya tata letak inline. Ada sejumlah sistem tata letak CSS yang bagus di luar sana. Saya hanya akan menggunakan satu.

Karena itu, jangan tambahkan gaya tata letak langsung ke komponen Anda. Bungkus komponen Anda dengan komponen tata letak. Ini sebuah contoh.

// This couples your component to the layout system
// It reduces the reusability of your component
<UserBadge
 className="col-xs-12 col-sm-6 col-md-8"
 firstName="Michael"
 lastName="Chan" />

// This is much easier to maintain and change
<div class="col-xs-12 col-sm-6 col-md-8">
  <UserBadge
   firstName="Michael"
   lastName="Chan" />
</div>

Untuk dukungan tata letak, saya sering mencoba mendesain komponen menjadi 100% widthdan height.

Penampilan

Ini adalah area yang paling diperdebatkan dari debat "inline-style". Pada akhirnya, tergantung pada komponen yang Anda desain dan kenyamanan tim Anda dengan JavaScript.

Satu hal yang pasti, Anda akan memerlukan bantuan perpustakaan. Status peramban ( :hover, :focus), dan kueri media menyakitkan di Bereaksi mentah.

Saya suka Radium karena sintaks untuk bagian-bagian keras dirancang untuk memodelkan bahwa dari SASS.

Organisasi kode

Seringkali Anda akan melihat objek gaya di luar modul. Untuk komponen daftar tugas, mungkin terlihat seperti ini:

var styles = {
  root: {
    display: "block"
  },
  item: {
    color: "black"

    complete: {
      textDecoration: "line-through"
    },

    due: {
      color: "red"
    }
  },
}

fungsi pengambil

Menambahkan banyak logika gaya ke template Anda bisa menjadi sedikit berantakan (seperti yang terlihat di atas). Saya suka membuat fungsi getter untuk menghitung gaya:

React.createClass({
  getStyles: function () {
    return Object.assign(
      {},
      item.props.complete && styles.complete,
      item.props.due && styles.due,
      item.props.due && this.props.dueStyles
    );
  },

  render: function () {
    return <li style={this.getStyles()}>{this.props.item}</li>
  }
});

Menonton lebih lanjut

Saya membahas semua ini secara lebih rinci di React Europe awal tahun ini: Inline Styles dan kapan sebaiknya 'hanya menggunakan CSS' .

Saya senang membantu ketika Anda membuat penemuan baru di sepanjang jalan :) Pukul aku -> @chantastic

Atribut style di Bereaksi mengharapkan nilai menjadi objek, yaitu pasangan nilai kunci.

style = {}akan memiliki objek lain di dalamnya yang ingin {float:'right'}membuatnya berfungsi.

<span style={{float:'right'}}>{'Download Audit'}</span>

Semoga ini bisa menyelesaikan masalah

Saya menggunakan gaya sebaris secara luas dalam komponen Bereaksi saya. Saya merasa jauh lebih jelas untuk menentukan gaya di dalam komponen karena selalu jelas gaya apa yang dimiliki dan tidak dimiliki komponen. Plus memiliki kekuatan penuh Javascript yang ada di tangan benar-benar menyederhanakan kebutuhan styling yang lebih kompleks.

Awalnya saya tidak yakin tetapi setelah mencoba-coba selama beberapa bulan, saya sepenuhnya bertobat dan sedang dalam proses mengubah semua CSS saya menjadi inline atau metode css berbasis JS lainnya.

Presentasi oleh karyawan Facebook ini dan kontributor Bereaksi "vjeux" juga sangat membantu - https://speakerdeck.com/vjeux/react-css-in-js

Tujuan utama atribut style adalah untuk gaya yang dinamis dan berdasarkan pada status. Misalnya, Anda bisa memiliki gaya lebar pada bilah kemajuan berdasarkan beberapa keadaan, atau posisi atau visibilitas berdasarkan sesuatu yang lain.

Gaya di JS memberlakukan batasan bahwa aplikasi tidak dapat menyediakan gaya khusus untuk komponen yang dapat digunakan kembali. Ini sangat dapat diterima dalam situasi yang disebutkan di atas, tetapi tidak ketika Anda mengubah karakteristik yang terlihat, terutama warna.

James K Nelson dalam suratnya "Mengapa Anda Tidak Harus Gaya Menanggapi Komponen Dengan JavaScript" menyatakan bahwa sebenarnya tidak perlu menggunakan gaya sebaris dengan kelemahannya. Pernyataannya adalah bahwa css membosankan lama dengan less / scss adalah solusi terbaik. Bagian dari tesisnya yang mendukung css:

• dapat diperpanjang secara eksternal
• leverable (gaya inline melebihi segalanya)
• ramah desainer

Styling di JSX sangat mirip dengan styling di HTML.

Kasus HTML:

div style = "background-color: red; color: white"

Kasus BEJ:

div style = {{backgroundColor: 'red', color: 'white'}}

Apa yang saya lakukan adalah memberikan masing-masing komponen yang dapat digunakan kembali saya nama elemen kustom yang unik dan kemudian membuat file css untuk komponen itu, khususnya, dengan semua opsi styling untuk komponen itu (dan hanya untuk komponen itu).

var MyDiv = React.createClass({
  render: function() {
    return <custom-component style={style}> Have a good and productive day! </custom-component>;
  }
});

Dan dalam file 'custom-component.css', setiap entri akan dimulai dengan tag komponen-kustom:

custom-component { 
   display: block; /* have it work as a div */
   color: 'white'; 
   fontSize: 200; 
} 
custom-component h1 { 
  font-size: 1.4em; 
}

Itu berarti Anda tidak kehilangan gagasan kritis tentang pemisahan kekhawatiran. Lihat vs gaya. Jika Anda membagikan komponen Anda, lebih mudah bagi orang lain untuk tema itu agar sesuai dengan sisa halaman web mereka.

Ini benar-benar tergantung pada seberapa besar aplikasi Anda, jika Anda ingin menggunakan bundler seperti webpack dan bundel CSS dan JS bersama-sama dalam pembuatan dan bagaimana Anda ingin mengatur aliran aplikasi Anda! Pada akhirnya, tergantung pada situasi Anda, Anda dapat mengambil keputusan!

Preferensi saya untuk mengatur file dalam proyek besar adalah memisahkan file CSS dan JS , bisa lebih mudah untuk dibagikan, lebih mudah bagi orang-orang UI untuk hanya melalui file CSS, juga pengorganisasian file yang lebih rapi untuk seluruh aplikasi!

Selalu berpikir seperti ini, pastikan dalam fase pengembangan semuanya di mana mereka seharusnya, dinamai dengan benar dan mudah bagi pengembang lain untuk menemukan hal-hal ...

Saya pribadi mencampurnya tergantung pada kebutuhan saya, misalnya ... Cobalah untuk menggunakan css eksternal, tetapi jika diperlukan Bereaksi akan menerima gaya juga, Anda harus meneruskannya sebagai objek dengan nilai kunci, sesuatu seperti ini di bawah ini:

import React from 'react';

const App = props => {
  return (
    <div className="app" style={{background: 'red', color: 'white'}}>  /*<<<<look at style here*/
      Hello World...
    </div>
  )
}

export default App;

Berikut ini adalah styling berbasis boolean di sintaks JSX :

style={{display: this.state.isShowing ? "inherit" : "none"}}

Saya biasanya memiliki file scss yang terkait dengan setiap komponen Bereaksi. Tapi, saya tidak melihat alasan mengapa Anda tidak akan merangkum komponen dengan logika dan mencari di dalamnya. Maksud saya, Anda memiliki hal yang mirip dengan komponen web.

Tergantung pada konfigurasi Anda, penataan inline dapat menawarkan kepada Anda Hot reload. Laman web segera dirender ulang setiap kali gaya berubah. Ini membantu saya mengembangkan komponen lebih cepat. Karena itu, saya yakin Anda dapat mengatur lingkungan Hot reload untuk CSS + SCSS.

Anda dapat menggunakan gaya sebaris tetapi Anda akan memiliki beberapa batasan jika Anda menggunakannya di semua gaya Anda, beberapa batasan yang diketahui adalah Anda tidak dapat menggunakan penyeleksi semu CSS dan permintaan media. di sana.

Anda bisa menggunakan Radium untuk menyelesaikan ini tetapi tetap saja, saya merasa proyek ini akan bertambah rumit.

Saya akan merekomendasikan menggunakan modul CSS .

menggunakan Modul CSS Anda akan memiliki kebebasan menulis CSS dalam file CSS dan tidak perlu khawatir tentang bentrokan penamaan, itu akan ditangani oleh Modul CSS.

Keuntungan dari metode ini adalah memberi Anda fungsionalitas styling ke komponen tertentu. Ini akan membuat kode yang lebih mudah dikelola dan arsitektur proyek yang dapat dibaca untuk pengembang selanjutnya untuk mengerjakan proyek Anda.

Untuk beberapa komponen, lebih mudah untuk menggunakan gaya inline. Juga, saya merasa lebih mudah dan lebih ringkas (karena saya menggunakan Javascript dan bukan CSS) untuk menghidupkan gaya komponen.

Untuk komponen yang berdiri sendiri, saya menggunakan 'Operator Penyebaran' atau '...'. Bagi saya, itu jelas, indah, dan bekerja di ruang yang sempit. Ini adalah sedikit memuat animasi yang saya buat untuk menunjukkan manfaatnya:

<div style={{...this.styles.container, ...this.state.opacity}}>
    <div style={{...this.state.colors[0], ...this.styles.block}}/>
    <div style={{...this.state.colors[1], ...this.styles.block}}/>
    <div style={{...this.state.colors[2], ...this.styles.block}}/>
    <div style={{...this.state.colors[7], ...this.styles.block}}/>
    <div style={{...this.styles.block}}/>
    <div style={{...this.state.colors[3], ...this.styles.block}}/>
    <div style={{...this.state.colors[6], ...this.styles.block}}/>
    <div style={{...this.state.colors[5], ...this.styles.block}}/>
    <div style={{...this.state.colors[4], ...this.styles.block}}/>
  </div>

    this.styles = {
  container: {
    'display': 'flex',
    'flexDirection': 'row',
    'justifyContent': 'center',
    'alignItems': 'center',
    'flexWrap': 'wrap',
    'width': 21,
    'height': 21,
    'borderRadius': '50%'
  },
  block: {
    'width': 7,
    'height': 7,
    'borderRadius': '50%',
  }
}
this.state = {
  colors: [
    { backgroundColor: 'red'},
    { backgroundColor: 'blue'},
    { backgroundColor: 'yellow'},
    { backgroundColor: 'green'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
    { backgroundColor: 'white'},
  ],
  opacity: {
    'opacity': 0
  }
}

EDIT NOVEMBER 2019

Bekerja di industri (perusahaan Fortune 500), saya TIDAK diizinkan membuat gaya inline. Di tim kami, kami telah memutuskan bahwa gaya sebaris tidak dapat dibaca dan tidak dapat dipertahankan. Dan, setelah melihat secara langsung bagaimana gaya inline membuat mendukung aplikasi sepenuhnya tidak dapat ditoleransi, saya harus setuju. Saya benar-benar mencegah gaya inline.

Masalah dengan gaya sebaris adalah Kebijakan Keamanan Konten (CSP) menjadi lebih umum, yang tidak memungkinkannya. Oleh karena itu, saya sarankan menghindari gaya sebaris sepenuhnya.

Memperbarui: Untuk menjelaskan lebih lanjut, CSP adalah tajuk HTTP yang dikirim oleh server yang membatasi konten apa yang dapat muncul pada halaman. Ini hanyalah mitigasi lebih lanjut yang dapat diterapkan ke server untuk menghentikan penyerang dari melakukan sesuatu yang nakal jika pengembang kode situs buruk.

Tujuan dari sebagian besar pembatasan ini adalah untuk menghentikan serangan XSS (cross-site scripting). XSS adalah tempat penyerang menemukan cara untuk memasukkan javascript sendiri di halaman Anda (misalnya, jika saya membuat nama pengguna saya bob<SCRIPT>alert("hello")</SCRIPT>dan kemudian mengirim komentar, dan Anda mengunjungi halaman, itu tidak akan menampilkan peringatan). Pengembang harus menolak kemampuan untuk memiliki pengguna menambahkan konten seperti ini ke situs, tetapi kalau-kalau mereka membuat kesalahan, maka CSP memblokir halaman dari memuat jika menemukanscript> tag.

CSP hanyalah tingkat perlindungan ekstra bagi pengembang untuk memastikan jika mereka melakukan kesalahan, bahwa penyerang tidak dapat menyebabkan masalah bagi pengunjung ke situs itu.

Jadi itu semua adalah XSS, tetapi bagaimana jika penyerang tidak dapat memasukkan <script>tag tetapi dapat menyertakan <style>tag atau menyertakan astyle= parameter pada tag? Lalu dia mungkin bisa mengubah tampilan situs sedemikian rupa sehingga Anda tertipu untuk mengklik tombol yang salah, atau masalah lain. Ini jauh dari masalah, tetapi masih sesuatu yang harus dihindari, dan CSP melakukan itu untuk Anda.

Sumber daya yang baik untuk menguji situs untuk CSP adalah https://securityheaders.io/

Anda dapat membaca lebih lanjut tentang CSP di: http://www.html5rocks.com/en/tutorials/security/content-security-policy/

Dibandingkan dengan menulis gaya Anda dalam file css, atribut gaya React memiliki keuntungan sebagai berikut :

1. Kemampuan untuk menggunakan alat javascript sebagai bahasa pemrograman menyediakan untuk mengontrol gaya elemen Anda. Ini termasuk menanamkan variabel, menggunakan kondisi, dan meneruskan gaya ke komponen anak.
2. Pendekatan "komponen". Tidak ada lagi pemisahan kode HTML, JS, dan CSS yang ditulis untuk komponen. Kode komponen dikonsolidasikan, dan ditulis di satu tempat.

Namun, atribut style React hadir dengan beberapa kelemahan - Anda tidak bisa

1. Tidak dapat menggunakan kueri media
2. Tidak dapat menggunakan penyeleksi semu,
3. kurang efisien dibandingkan dengan kelas CSS.

Menggunakan CSS di JS, Anda bisa mendapatkan semua keuntungan dari tag gaya, tanpa kekurangannya . Sampai hari ini ada beberapa css populer yang didukung dengan baik di js-libraries, termasuk: Emotion, Styled-Components, dan Radium. Pustaka-pustaka itu untuk css jenis apa Bereaksi terhadap HTML. Mereka memungkinkan Anda untuk menulis CSS dan mengontrol CSS Anda dalam kode JS Anda.

mari kita bandingkan bagaimana kode kita akan mencari penataan elemen sederhana. Kami akan merancang div "hello world" sehingga tampil besar di desktop, dan lebih kecil di seluler.

Menggunakan atribut style

return (
   <div style={{fontSize:24}} className="hello-world">
      Hello world
   </div>
)

Karena kueri media tidak dimungkinkan dalam tag gaya, kita harus menambahkan className ke elemen dan menambahkan aturan css.

@media screen and (max-width: 700px){
   .hello-world {
      font-size: 16px; 
   }
}

Menggunakan tag 10 css Emotion

return (
   <div
      css={{
         fontSize: 24, 
         [CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY]:{
            fontSize: 16 
         }
      }
   >
      Hello world
   </div>
)

Emosi juga mendukung string template serta komponen gaya. Jadi, jika Anda mau, Anda bisa menulis:

return (
   <Box>
      Hello world
   </Box>
)

const Box = styled.div`
   font-size: 24px; 
   ${CSS_CONSTS.MOBILE_MAX_MEDIA_QUERY}{
      font-size: 16px; 
   }
`

Di balik tudung "Css in JS" menggunakan kelas css. Emosi secara khusus dibangun dengan kinerja dalam pikiran, dan menggunakan caching. Dibandingkan dengan Bereaksi atribut gaya Css di JS akan memberikan kinerja yang lebih baik.

Praktik terbaik

Berikut adalah beberapa praktik terbaik yang saya rekomendasikan:

1. Jika Anda ingin menata elemen Anda secara inline, atau dalam JS Anda, gunakan pustaka css-in-js, jangan gunakan atribut style.

Haruskah saya bertujuan melakukan semua gaya dengan cara ini, dan tidak memiliki gaya yang ditentukan dalam file CSS saya?

2. Jika Anda menggunakan solusi css-in-js, tidak perlu menulis gaya dalam file Css. Menulis css Anda di JS lebih unggul karena Anda dapat menggunakan semua alat bahasa pemrograman seperti yang disediakan JS.

haruskah saya menghindari gaya sebaris sepenuhnya?

3. Penataan kode gaya Anda di JS sangat mirip dengan menyusun kode Anda secara umum. Sebagai contoh:
   • kenali gaya yang berulang, dan tulis di satu tempat. Ada dua cara untuk melakukan ini dalam Emosi:

// option 1 - Write common styles in CONSTANT variables
// styles.js
export const COMMON_STYLES = {
   BUTTON: css`
      background-color: blue; 
      color: white; 
      :hover {
         background-color: dark-blue; 
      }
   `
}

// SomeButton.js
const SomeButton = (props) => {
   ...
   return (
      <button
         css={COMMON_STYLES.BUTTON}
         ...
      >
         Click Me
      </button>
   )
}

// Option 2 - Write your common styles in a dedicated component 

const Button = styled.button`
   background-color: blue; 
   color: white; 
   :hover {
      background-color: dark-blue; 
   }   
`

const SomeButton = (props) => {
   ...
   return (
      <Button ...> 
         Click me
      </Button>
   )
}

• Pola pengkodean yang bereaksi adalah komponen yang dienkapsulasi - HTML dan JS yang mengontrol komponen ditulis dalam satu file. Di situlah kode css / style Anda untuk menata komponen yang dimiliki.

• Bila perlu, tambahkan alat penata gaya ke komponen Anda. Dengan cara ini Anda dapat menggunakan kembali kode dan gaya yang ditulis dalam komponen anak, dan menyesuaikannya dengan kebutuhan spesifik Anda oleh komponen induk.

const Button = styled.button([COMMON_STYLES.BUTTON, props=>props.stl])

const SmallButton = (props)=>(
   <Button 
      ...
      stl={css`font-size: 12px`}
   >
      Click me if you can see me
   </Button>
)

const BigButton = (props) => (
   <Button
      ...
      stl={css`font-size: 30px;`}
   >
      Click me
   </Button>
)

Anda dapat menggunakan StrCSS juga, itu menciptakan nama kelas yang terisolasi dan banyak lagi! Kode contoh akan terlihat seperti. Anda dapat (opsional) menginstal ekstensi VSCode dari Visual Studio Marketplace untuk dukungan penyorotan sintaks!

sumber: strcss

import { Sheet } from "strcss";
import React, { Component } from "react";

const sheet = new Sheet(`
  map button
    color green
    color red !ios
    fontSize 16
  on hover
    opacity .5
  at mobile
    fontSize 10
`);

export class User extends Component {
  render() {
    return <div className={sheet.map.button}>
      {"Look mom, I'm green!
      Unless you're on iOS..."}
    </div>;
  }
}

Beberapa waktu kita perlu mendesain beberapa elemen dari suatu komponen, tetapi jika kita harus menampilkan hanya komponen itu atau gaya yang kurang dari itu daripada menggunakan kelas CSS kita pergi untuk gaya inline dalam bereaksi js. gaya inline reactjs sama dengan gaya inline HTML hanya nama properti yang sedikit berbeda

Tulis gaya Anda di tag apa pun menggunakan style = {{prop: "value"}}

import React, { Component } from "react";
    import { Redirect } from "react-router";

    class InlineStyle extends Component {
      constructor(props) {
        super(props);
        this.state = {};
      }

      render() {
        return (
          <div>
            <div>
              <div
                style={{
                  color: "red",
                  fontSize: 40,
                  background: "green"
                }}// this is inline style in reactjs
              >

              </div>
            </div>
          </div>
        );
      }
    }
    export default InlineStyle;

Pembaruan 2020: Praktik terbaik adalah menggunakan perpustakaan yang telah melakukan kerja keras untuk Anda dan tidak membunuh tim Anda ketika Anda beralih seperti yang ditunjukkan oleh jawaban yang diterima semula di video ini (masih relevan). Juga hanya untuk memahami tren, ini adalah grafik yang sangat membantu . Setelah melakukan penelitian sendiri tentang ini, saya memilih untuk menggunakan Emosi untuk proyek-proyek baru saya dan terbukti sangat fleksibel dan skala.

Mengingat bahwa jawaban yang paling banyak dipilih dari 2015 merekomendasikan Radium yang sekarang diturunkan ke mode pemeliharaan . Jadi sepertinya masuk akal untuk menambahkan daftar alternatif. The pasca penghentian Radium menunjukkan beberapa perpustakaan. Setiap situs yang ditautkan memiliki contoh yang tersedia sehingga saya tidak akan menyalin dan menempelkan kode di sini.

• Emosi yang "terinspirasi oleh" komponen-komponen yang ditata antara lain, menggunakan gaya dalam js dan dapat menjadi kerangka agnostik, tetapi jelas mempromosikan pustaka Bereaksi. Emosi telah diperbarui sejak posting ini.
• komponen-gaya sebanding dan menawarkan banyak fitur yang sama seperti Emosi. Juga aktif dipertahankan. Baik Emotion maupun styled-components memiliki sintaksis yang serupa. Itu dibangun khusus untuk bekerja dengan komponen Bereaksi.
• JSS Namun pilihan lain untuk gaya dalam js yang merupakan kerangka agnostik meskipun ia memiliki sejumlah paket kerangka kerja, React-JSS di antara mereka.

Pokoknya inline css tidak pernah direkomendasikan. Kami menggunakan komponen bergaya dalam proyek kami yang didasarkan pada JSS. Ini melindungi css overriding dengan menambahkan nama kelas dinamis pada komponen. Anda juga dapat menambahkan nilai css berdasarkan props yang diteruskan.