React: Bagaimana cara merangkum gaya?

Dibuat pada 5 Mar 2015  ·  6Komentar  ·  Sumber: facebook/react

Hai,
kami mengubah proyek besar yang ditulis dengan Polymer menjadi React.
Masalah terbesar yang kami hadapi adalah kurangnya gaya yang dikemas.
Saya ingin merangkum file sass saya dengan gaya yang dienkapsulasi di antara komponen saya.
Di seluruh situs web react dan dokumentasi hampir tidak ada penyebutan gaya.
Selanjutnya di chrome devtools di bawah plugin React Anda memiliki semua properti komponen kecuali style. (tidak seperti alat pengembang dari DOM biasa).
Saya sangat suka React dan apa yang Anda lakukan, jadi bagaimana Anda akan mendekati masalah ini?

Question

Komentar yang paling membantu

Saya berasumsi Anda telah melihat dokumen ini tentang cara kami melakukan gaya sebaris: http://facebook.github.io/react/tips/inline-styles.html

Gaya kita berperilaku sama seperti gaya browser. Kami belum memiliki solusi sebersih shadow DOM untuk enkapsulasi gaya, tetapi web telah ada selama bertahun-tahun tanpa shadow DOM, jadi sangat mungkin untuk merancang situs web menggunakan aturan gaya bawaan peramban :).

Satu hal yang dapat Anda lakukan adalah menentukan kelas setel ulang gaya, yang menyetel ulang gaya ke default, lalu Anda dapat mengganti default dengan penyeleksi yang lebih spesifik.

Alternatifnya, Anda dapat membuat objek gaya sebaris dasar yang memiliki semua gaya default Anda, mengimpor objek itu di mana-mana, dan ketika Anda ingin menerapkan gaya tertentu, Anda menyalin objek itu dan mengganti gaya yang ingin Anda setel menggunakan Object.assign . Jika Anda ingin menjadi benar-benar mewah, Anda dapat meminta komponen Anda melakukan penggabungan gaya (dengan objek gaya-reset yang Anda buat) secara otomatis, sehingga webdev Anda dapat menggunakan komponen tanpa melihat kode pengaturan ulang gaya.

Itu dua sen saya. cc @spicyj

PS: Karena ini lebih merupakan pertanyaan penggunaan daripada bug di React, saya akan melanjutkan dan menutup masalah. Jangan ragu untuk melanjutkan percakapan di utas ini (menutup masalah sebagian besar hanya akan menghilangkannya dari radar kami untuk tujuan dev). Tempat yang ideal untuk pertanyaan seperti ini adalah StackOverflow.

Semua 6 komentar

Saya berasumsi Anda telah melihat dokumen ini tentang cara kami melakukan gaya sebaris: http://facebook.github.io/react/tips/inline-styles.html

Gaya kita berperilaku sama seperti gaya browser. Kami belum memiliki solusi sebersih shadow DOM untuk enkapsulasi gaya, tetapi web telah ada selama bertahun-tahun tanpa shadow DOM, jadi sangat mungkin untuk merancang situs web menggunakan aturan gaya bawaan peramban :).

Satu hal yang dapat Anda lakukan adalah menentukan kelas setel ulang gaya, yang menyetel ulang gaya ke default, lalu Anda dapat mengganti default dengan penyeleksi yang lebih spesifik.

Alternatifnya, Anda dapat membuat objek gaya sebaris dasar yang memiliki semua gaya default Anda, mengimpor objek itu di mana-mana, dan ketika Anda ingin menerapkan gaya tertentu, Anda menyalin objek itu dan mengganti gaya yang ingin Anda setel menggunakan Object.assign . Jika Anda ingin menjadi benar-benar mewah, Anda dapat meminta komponen Anda melakukan penggabungan gaya (dengan objek gaya-reset yang Anda buat) secara otomatis, sehingga webdev Anda dapat menggunakan komponen tanpa melihat kode pengaturan ulang gaya.

Itu dua sen saya. cc @spicyj

PS: Karena ini lebih merupakan pertanyaan penggunaan daripada bug di React, saya akan melanjutkan dan menutup masalah. Jangan ragu untuk melanjutkan percakapan di utas ini (menutup masalah sebagian besar hanya akan menghilangkannya dari radar kami untuk tujuan dev). Tempat yang ideal untuk pertanyaan seperti ini adalah StackOverflow.

Saya cenderung merekomendasikan penggunaan nama kelas BEM-esque yang unik secara global, biasanya dibatasi oleh nama komponen:

var MyComponent = React.createClass({
  render: function() {
    return (
      <div className="MyComponent">
        <button className="MyComponent__button">Hi!</button>
      </div>
    );
  }
});

dan kemudian di CSS Anda, cobalah untuk menghindari penggunaan pemilih turunan, yang mendukung nama kelas tunggal. Hal ini cenderung mendorong isolasi gaya dan pemisahan komponen - ini membuatnya lebih mudah untuk membuat komponen tanpa gaya berantakan.

Suit adalah pilihan bagus lainnya karena memiliki perkakas hidung (pengerjaan ulang) yang bagus dan validator kesesuaian untuk memberikan perlindungan otomatis agar gaya Anda tidak berdarah.

Ini terlihat seperti solusi yang menarik: https://github.com/Wildhoney/ReactShadow

Solusi potensial lainnya adalah http://projects.formidablelabs.com/radium/

Saya lebih menyukai gaya sebaris jika memungkinkan, lalu jika terlalu rumit, gunakan sesuatu seperti BEM, seperti yang direkomendasikan oleh @spicyj. Saya juga suka SuitCSS, yang cocok dengan React menurut pengalaman saya.

Apakah halaman ini membantu?
0 / 5 - 0 peringkat