React 9 – Style Dosyaları Oluşturmak

Bir önceki yazımızda stillerin “.css” dosyalarında tutulmasının daha tercih edilir ve doğru bir yaklaşım olduğundan bahsetmiştik.

Peki “.css” dosyaları ile nasıl stiller tanımlarız.

Öncelikle kodumuzu önceki haline getirelim.

render() {

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

Componentimiz içinde herhangi bir stil kodu kalmadı.

Şimdi de aynı dizinde bir “ButtonExample.css” dosyası tanımlayalım. Az önceki örnekten farklı olması için bu kez arka plan rengini mavi olarak tanımlayalım.

button{
    font-size: 30px;
    background-color: blue;
}
Görüldüğü üzere, stilimizi “.css” dosyası üzerinden çok daha kolay ve anlaşılır şekilde verebildik.
 

Sadık Bahadır Memiş

 

Bir cevap yazın

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