React 8 – Inline Style Tanımlamak

Nasıl JSX içine javascript kodu ekeyebiliyorsak benzer şekilde inline olarak stiller ekleyebiliriz.

Örneğin, butonumuzun boyutunu büyütmek istedik diyelim. Bunu normalde css içinde “font-size= 30px” diyerek yapabiliriz. Benzer şekilde arka plan rengini “background-color: green” diyerek değiştirebiliriz.

Bir css dosyası yerine inline olarak bu stilleri vermek istersek dikkat etmemiz gereken bazı kurallar var.

İlk olarak JSX içinde “-” karakteri kullanmıyoruz. Bunun yerine “camel case” kullanıyoruz. Yani “-” stil dosyasında “-” olarak yazacağımız propertyleri “-” leri silerek, büyük harfle başlatıyoruz.

İkinci durum ise “=” karakteri için. Propertyleri json formatında tanımladığımız için “=” yerine “:” kullanıyoruz.

bir css dosyasında “font-size = 30px” olarak tanımlanan stil, JSX içinde ” fontSize: “30px” ” olarak tanımlanır.

Son olarak JSX içine bir Javascript kodu yazmak istediğimizde ne yapıyorduk? Süslü parantezler içerisine alıyorduk. Burada da benzer durum var. Sadece stil property’lerini birer object gibi tanımladığımız için bir süslü paranteze daha ihtiyacımız var.

Yani kodumuz şu şekilde olmalı:

{{fontSize: "30px"}}

Bir object gibi neden tanımlıyoruz? Çünkü birden fazla stil tanımlayabiliriz. Örneğin bir de “background-color = green ” yapacağız. Bu durumda nasıl tanımlarız?

{
	fontSize:"30px",
	backgroundColor:"green"
}

JSX kodumuz nasıl bir hal alır?

render() {

        return (
            <div className="ButtonExample">
                <button 
                    onClick={this.handleClick}
                    style = {
                        {
                            fontSize:"30px",
                            backgroundColor:"green"
                        }
                    }
                >Tik</button>
                <label>{this.state.clicked}</label>
            </div>);
}

Bu görünüm kodumuzu oldukça karmaşık bir hale getirebilir. Bu gibi durumlarda buradaki değeri bir variable’a atamak fena fikir olmayabilir.

Bunun için render metodunun içinde bir variable tanımlayabiliriz. Aslında variable demek de her zaman doğru olmayabilir. Bu bir constant da olabilir. Yani kodumuz aşağıdaki şekilde de yazılabilir.

render() {

        const buttonStyle = {
            fontSize:"30px",
            backgroundColor:"green"
        }

        return (
            <div className="ButtonExample">
                <button 
                    onClick={this.handleClick}
                    style = {buttonStyle}
                >Tik</button>
                <label>{this.state.clicked}</label>
            </div>);
}

Not:

Bu çok tercih edilen ve kabul gören bir yol mudur? Hayır. Fakat yapılabilir mi? Evet. Biz yine de stilleri “.css” dosyalarında tutmayı tercih etmeliyiz.

 

Sadık Bahadır Memiş

 

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir