React Typescipt’de Styled-Components Kullanımı

Styled-Components’i Typescript ile birlikte kullanırken özellikle props geçtiğimiz anlarda hemen değerin altı kırmızı çizgi olur. Gelin bu sorunu nasıl çözebileceğimize bakalım.

Yukarıdaki görselde en sağ tarafta işaretlemiş olduğum alanın bir tıklama sonucunda bir değişiklik olmasını istiyorum. Bunun için:
1. Bir state oluşturalım open adında ve tipi boolean.
2. State değerimizi değiştirecek bir arrow fonksiyon yazalım.
3. Son olarak bu değeri aynı klasördeki styles.ts dosyasından import etmiş oluğum Wrapper adlı div’e props olarak geçelim.

4. Adımda bir interface yazalım ben ismini Props olarak belirledim sizler istediğiniz herhangi bir isim belirleyebilirsiniz.
5. Adımda Wrapper’a oluşturmuş olduğumuz interface’i atayalım.

Son olarak state değerine göre olmasını istediğimiz kodu yazalım işlem bu kadar, sağ tarafta gördüğünüz üzere rotate değeri değişmiş ikonumuzu başarıyla oluşturduk. 🎉