React Inline Style Kullanımı

React JS ile geliştirme yaparken sitil özelliklerini farklı şekillerde verebilirsiniz. Bunlardan bir tanesi de satır için stil verme (inline style) kullanmadır. Genel olarak çok tavsiye edilmese de bazı durumlarda inline style kullanmak gerekebilir.

Inline Style Nedir?

Satır için sitiler bir etiketin içerisinde direkt olarak sitil bigilerinin style özelliği ile girilmesidir. Mesela bir div etiketinin zemin rengini

<div style="background-color: black"> ... </div>

şeklinde satır içi olarak değişebilirsiniz. Bu CSS kullanımıdır. Eğer JavaScript ile bu işlemi yapacaksanır, sitil özelliklerini JavaScript’e ugun yazmanız ve camel-case bir yazım kullanmanız gerekir. Yukarıdaki işlemi JavaScript ile yapalım.

    const div = getElementById('aciklama');
    div.style.backgroundColor = 'black';

React JS ile Inline Style Kullanma

React içerisinde inline sitil kullanacaksanız JavaScript yönetimini kullanmanız gerekiyor. Aksi halde hata alırsınız. Mesela yukarıdaki gibi açıklama divi için bir zemin rengi atayalım.

    return (
        <div id="aciklama" style={{backgroundColor: 'black}}> ... </div>
    );

Farklılık hemen göze batıyor. React ile satır için sitil kullanacaksanız bunu JavaScript nesnesi olarak vermeniz gerekiyor. Bunun için önce süslü parantez açarak JavaScript kullanacağımızı belirttik. Sonrasında bir nesne gireceğimiz için ikinci bir süslü parantez açtık. İçerisinde sitil ismini camel case olarak girdik. Yani background-color yerine backgroundColor şeklinde kullandık. Yine değeri de çift tırnak içerisinde girdik. Artık açıklama bloğunun zemini siyah olacaktır.

Şimdi bunu farklı bir şekilde, sitil bilgilerini bir değişkene atayarak kullanalım.

    const sitiler = {
        backgroundColor: 'black',
        color: 'white',
        border: '1px red solid'
    }

    return (
        <div style={sitiller}> ... </div>
    );

Sitil bilgilerini bir nesne olarak farklı bir değişkene atadığımız için satır içi sitil bilgisini girerken bir adet süslü parantez kullandık ve sadece JavaScript kullanacağımızı bildirdik. sitiller değişkeni zaten bir nesne olduğu için ikinci bir süslü parantez açmadık.

Konu hakkında bilgi ve sorularınızı yorumlara yazabilirsiniz.