javascript - Mereferensikan Komponen Bergaya

Saya punya pertanyaan tentang styled components dan apa yang terjadi ketika sebuah styled component dirujuk dalam styled component lain.

Saya tahu dokumen resmi dengan contoh Link, tetapi saya tidak mengerti apa yang sebenarnya terjadi ketika sebuah komponen bergaya dirujuk.

Jadi pertanyaan saya: dalam contoh berikut - apakah referensi $ {A}, $ {B} meneruskan gaya mereka ke pembungkus? atau hanya merujuk padanya, sehingga mengubah atribut tertentu.

Bagaimana ini ditangani di balik layar?

misalnya:

const A = styled.div`
    background-color: red;
    margin-top: 10px;
`

const B = styled.div`
    background-color: blue;
`

const Wrapper = styled.div`
    ${A}, ${B} {
        background-color: green;
    }
`
export const NiceComponent: React.FC = () => {
    return (
        <Wrapper>
            <A />
            <B />
        </Wrapper >
    );

Jawaban #1

Mereferensikan komponen bergaya lain (dalam contoh Anda A dan B) sebagai interpolasi dalam template string pseudo-SCSS dari sebuah komponen bergaya (di sini Wrapper) setara dengan menggunakan nama kelas mereka (yang ditetapkan secara otomatis) dalam pemilih Anda.

Dengan cara ini, Anda bisa merujuk pada nenek moyang (seperti yang dilakukan dalam dokumen), atau menargetkan anak-anak (seperti dalam contoh Anda).

Sebagai demikian, teknik ini tidak 'mewariskan gaya'; untuk melakukannya, Anda perlu memberi gaya pada komponen yang sudah bergaya lainnya, seperti pewarisan (misalnya Anda bisa melakukan const Child=styled(A))

Dalam contoh Anda, styled-components akan memberikan nama kelas untuk setiap komponen; misalnya "scAAA" untuk komponen A, dan "scBBB" untuk B. Kemudian kode ini:

const Wrapper = styled.div`
    ${A}, ${B} {
        background-color: green;
    }
`

...diterjemahkan menjadi:

const Wrapper = styled.div`
    .scAAA, .scBBB {
        background-color: green;
    }
`

Jadi yang dilakukan adalah menetapkan warna latar belakang baru untuk semua komponen A dan B yang merupakan anak dari Wrapper.

Tapi jika Anda menggunakannya di luar Wrapper, mereka hanya akan memiliki gaya awal mereka.

Artikel terkait