React.js praktik terbaik gaya inline


512

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.


Anda dapat menggunakan tema reaksi untuk mengatur gaya inline Anda dan membuatnya mudah disesuaikan ketika Anda sedang membangun komponen yang dapat digunakan kembali. Ia bekerja mirip dengan ThemeManager di material-ui .
mantramantramantra

6
Pertimbangkan untuk menggunakan github.com/css-modules/css-modules . github.com/gajus/react-css-modules adalah implementasi Bereaksi (yang saya penulis). Modul CSS dan React Modul CSS secara otomatis memetakan nama kelas komponen Anda ke modul CSS yang diberi nama unik dalam ruang lingkup dokumen.
Gajus

1
Saya menggunakan CSS sambil harus menulis pertanyaan media. Saya juga menggunakan kelas dari pustaka CSS dasar seperti bootstrap.
vijayst

Menggunakan atribut style sebagai sarana utama elemen penataan umumnya tidak disarankan. ( reactjs.org/docs/dom-elements.html#style )
Omid Ebrahimi

Sampai hari ini, saya sarankan menggunakan solusi css-in-js. Ia memiliki semua kelebihan dari atribut style, tanpa kekurangan. Saya menulis jawaban stackoverflow.com/questions/26882177/…
Ben Carp

Jawaban:


463

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


10
Sangat bagus dibaca. Anda juga sangat menghargai pembicaraan yang relevan ini oleh Anda, @chantastic. #accepted
eye_mew

5
"Bungkus komponen Anda dengan komponen tata letak": Sangat jelas, tapi persis apa yang saya butuhkan.
tandrewnichols

2
@Chantastic jawaban yang bagus. Setahun kemudian, apakah semuanya masih benar? Hanya benar-benar hanya masuk ke React dan ide styling inline, dan hanya bertanya-tanya apakah ada yang berubah sejak Anda memposting jawaban ini.
alexrussell

4
@alexrussell terima kasih! Saya pikir jawabannya di sini masih cukup baik. satu hal yang telah berubah adalah bahwa Aphrodite tampaknya menjadi perpustakaan inline-stiles yang lebih disukai masyarakat (lebih dari Radium) — walaupun itu sebenarnya masalah pilihan pribadi.
chantastic

2
@alexrussell oops. sengaja dikirim lebih awal. Saya sekarang menggunakan teknik komponen ini untuk menata komponen saya. idenya cukup sederhana. Anda membuat komponen yang hanya berkaitan dengan penerapan gaya dan compose dengan orang-orang, bukan div, span, a, dll itu akan membantu gaya keep terisolasi terlepas dari perpustakaan Anda gunakan. reactpatterns.com/#Style komponen
chantastic

135

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


3
jadi bagaimana menggunakan kueri media untuk hal yang sama jika saya ingin menggunakan Kelas css dalam file JS
Pardeep Jain

@PardeepJain Salah satu caranya adalah dengan menggunakan Emosi di sini adalah ceramah lengkapnya jika Anda tertarik dari pertemuan meet.js 2018
Bruno Finger

Satu kelemahan dari pendekatan ini adalah bahwa mendefinisikan style inline menciptakan objek baru setiap kali. Ini menciptakan perbedaan dalam styleprop yang dapat menyebabkan masalah kinerja. Paling tidak, tentukan gaya konstan seperti ini di luar Anda render. Semoga ini membantu!
Dawson B

49

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


5
Bagaimana cara membuat tata letak responsif dengan gaya sebaris? Anda tidak memiliki opsi untuk pertanyaan media di sini.
Zeus

Anda mendapatkan kekuatan js, js dapat mendeteksi ukuran browser untuk membangun gaya secara dinamis.
JordyvD

3
@ g3mini itu bukan pendekatan yang disarankan sekarang, karena ada banyak solusi yang lebih kuat untuk komponen styling seperti CSS Modules, styled-componentsdan lainnya.
Denialos

Ada css di js juga =) Saya lebih suka menggunakan Modul CSS untuk saat ini.
JordyvD

Satu hal yang tidak dipertimbangkan di sini adalah sangat mudah untuk melihat gaya induk dan anak dalam file SASS yang sama, sedangkan jika Anda perlu melihat aturan dalam komponen yang berbeda, Anda mungkin harus membuka dan menutup banyak file.
Ringo

23

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.


Gagasan terkait yang kami miliki untuk beberapa waktu adalah kemampuan untuk mengisolasi aturan CSS spesifik untuk komponen Bereaksi menggunakan tegukan dan KURANG. Jenis suka mengatur className tertentu untuk setiap komponen, lalu menambahkan CSS spesifik untuk kelas itu di dalam file komponen. Ini akan sangat masuk akal.
David Hellsing

Saya sering menggunakan nama kelas dalam format "component- {app} - {componentName}". "{app}" dapat berupa nama aplikasi, atau "umum" untuk komponen independen aplikasi. mis. "component-foo-todo-list" untuk TodoList dan "komponen-common-light-switch-toggle". Untuk komponen yang dikemas {app} akan menjadi nama npm. Apakah itu yang Anda maksud?
Brigand

Ya, konvensi penamaan adalah satu hal, tetapi hal utama adalah menambahkan aturan CSS yang terisolasi ke dalam file js komponen yang sama.
David Hellsing

2
Ini tidak benar. Anda dapat menerapkan gaya khusus untuk bereaksi komponen. Komponen hanya perlu menggabungkan objek gayanya sendiri dengan objek yang diserahkan dari atas, yang dapat berasal dari data aplikasi. Lihat slide terakhir dari speakerdeck.com/vjeux/react-css-in-js seperti yang disebutkan di bawah ini
Flion

Tentu, jika Anda komponen adalah elemen tunggal, tetapi mengingat <div><a>foo <b>bar</b></a><table>...</table></div>bagaimana Anda gaya itu dari alat peraga? Perlu diingat bahwa struktur html harus tetap menjadi detail implementasi, atau Anda kehilangan banyak komponen manfaat yang disediakan.
Brigand


10

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'}}


8

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.


Beginilah cara saya melakukannya. Satu-satunya sisi adalah bahwa itu dua file, bukan satu. Saya bisa hidup dengan itu.
Saus

5

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;

5

Berikut ini adalah styling berbasis boolean di sintaks JSX :

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

3

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.


3

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.


3

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.


3

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.


2

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/


Bisakah Anda jelaskan sedikit lebih banyak?
Dmitry Manannikov

8
Anda merujuk secara khusus pada unsafe-inlinekebijakan tersebut. Kebijakan ini memungkinkan pembatasan dari elemen style <style>untuk tidak gaya inline diterapkan atribut gaya elemen ini: <div style="">. Karena pertanyaan di atas mengacu pada atribut style, ini sepertinya saran yang buruk untuk menghindari gaya inline sepenuhnya. Juga reactdisarankan untuk memindahkan semua CSS ke JS: github.com/reactjs/react-future/blob/master/04%20-%20Layout/…
potench

1
@potench tautan itu benar-benar hebat, mungkin layak untuk jawabannya sendiri
eye_mew

6
Sayangnya, jawaban @eye_mew dan @ Sam-Rad - @potench tidak benar. CSP unsafe-inlinemenonaktifkan semua bentuk gaya sebaris termasuk pada atribut gaya. Anda secara terprogram dapat menggunakan API gaya pada suatu elemen melalui JS (mis. elem.style.color = 'blue';), Tetapi Anda tidak bisa mengatur atribut style pada suatu elemen (seperti 'unsafe-inline'dalam arahan skrip-src yang melarang tag skrip inline, tetapi juga onclickatribut dan teman.)
Alex Sexton

2
Ada lebih banyak informasi dari tim Facebook tentang bagaimana gaya diterapkan berkenaan dengan CSP di React v15 github.com/facebook/react/issues/5878 . Layak dibaca
Mark Lundin

2

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?

  1. 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?

  1. 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>
)

2

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>;
  }
}

1

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;

Bisakah Anda menambahkan beberapa informasi lebih lanjut tentang bagaimana dan mengapa kode ini memberikan jawaban untuk pertanyaan OP? Terima kasih!
deHaar

1

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.

0

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.

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.