React & MaterialUI & TailwindCSS & Sass Açık ve Koyu Tema

React ile projeler geliştirilirken MaterialUI ve Ant Design gibi kütüphaneleri kullanmak işleri ciddi ölçüde kolaylaştırmaktadır. Ancak bu kütüphaneler ile çalışırken, kütüphanelerin sağladığı bileşenlere sitil vermek istediğimiz zaman birkaç sorunla karşılaşırız. Bu yazıda React ile MaterialUI, TailwindCSS ve SASS kullanarak koyu/açık tema destekli projelerin nasıl geliştirileceğini göstereceğim. Örnek uygulama olarak ise istediğimiz koyu açık tema destekleyen, Material UI bileşenlerini kullanan bir Giriş uygulaması. Eğer yazıyı okumak istemezseniz buraya tıklayarak bütün projeye erişebilirsiniz.

React Projesinin Oluşturulması ve Gerekli Kütüphanelerin Eklenmesi

İlk olarak React projesi standart yöntem olan CRA ile oluşturulur. Ardından işlemlere oluşturulan proje dizininde devam edilir.

npx create-react-app react-themed && cd react-themed

TailwindCSS Kurulumu

TailwindCSS kurulumu için üç adet paket yüklememiz gerekiyor. Bu paketler tailwindcss, postcss ve autoprefixer. Ardından TailwindCSS konfigurasyon dosyalarının oluşturulması için tailwindcss komutunu çalıştırmalıyız.

npm install -D tailwindcss postscss autoprefixer #Gerekli paketler
npx tailwindcss init -p # Konfigurasyon dosyalarının oluşturulması

MaterialUI ve IconsMaterial

Bu kısımda kurulan paketlerden icons-material ve clsx opsiyoneldir. Eğer farklı bir tasarım yapmak isterseniz farklı kütüphaneler kullanabilirsiniz. icons-material sayfadaki iconlarda, clsx ise tema değiştiren switch’te kullanılmıştır.

npm install @mui/material @emotion/react @emotion/styled
npm install @mui/icons-material # Opsiyonel
npm install clsx # Opsiyonel

Sass

Sass, CSS yazmayı kolaylaştıran farklı bir dildir. Sass’ın React üzerinde kurulumu oldukça basittir ve tek bir komut ile halledilebilir. Kurulduktan sonra direk kullanılabilir. Eğer istenirse Sass’ta CSS modülleri gibi kullanılabilir. (ComponentStyles.module.scss & import styles from ComponentStyles). Ancak bu şekilde kullanılırsa TailwindCSS doğru çalışmayacaktır.

npm install sass

Projenin Kodlanması

React projesi oluşturulduktan ve gerekli kütüphaneler eklendikten sonra App.css dosyamızı App.scss şeklinde değiştirip App.js kök bileşenimizde Sass dosyasını import edebiliriz.

Tailwind Konfigurasyonunun Düzenlenmesi

Uygulamamızda kullanacağımız temayı tailwind.config.js dosyasında belirtip bu temayı dinamik olarak kullanabiliriz. Burada dikkat etmemiz gereken nokta konfigurasyonu düzenlerken darkMode: ‘class’ ifadesini eklemeyi unutmamaktır. Eğer bunu eklemezsek Tailwind temadaki değişikliği anlamaz ve dark: ile yazdığımız ifadeler çalışmaz. Tailwind bu ifade ile HTML elementinin sınıf ismine bakmaktadır ve bu sınıf isminde dark varsa Tailwind koyu temaya geçmektedir. Böylelikle React ile HTML elementinin sınıflarına dark eklediğimiz zaman Tailwind koyu temayı kullanmaktadır.

Tailwind üzerinden oluşturduğumuz renklere erişmek için:

/* bg: background ve text: text color */
@apply bg-primary_bg dark:bg-primary_bg_dark text-primary-fg
/* Sass üzerinden erişim */
color: theme('colors.primary_bg');

Temanın Sass’a Eklenmesi

Tailwind konfigurasyonunda belirttiğimiz temayı Sass’a entegre ederek bileşenlerimizde bu temayı kullanabiliriz. Bunun için src/ dizininde ThemeVariables.scss dosyasına :

Tema Bağlamının(Context) Oluşturması

React’ın sunduğu Context API’si genellikle tema oluşturma, WebSoket işlemleri gibi bir çok bileşenin ihtiyaç duyduğu veriyi bileşenlere sunmakta kullanılmaktadır. Eğer React Context ile ilgili bilginiz yoksa kendi yazılarını okuyabilirsiniz. Burada yapılmak istenen ise temayı bütün bileşenlere bildirmek ve tema değişim imkanını bileşenlere sunmak. Böylelikle istediğimiz bileşenden temayı değiştirebileceğiz ve bütün bileşenler bu tema değişiminden haberdar olacak. Bunun için tema sağlayıcısını (ThemeProvider) uygulamamızda en üst bileşen olarak tanımlamalıyız. src/ dizinimizde Contexts klasörü içine ThemeContext.jsx dosyası oluşturulur:

Böylelikle herhangi bir bileşenimizde temayı aşağıdaki şekilde kullanabiliriz:

import ThemeContext from "./Contexts/ThemeContext.jsx";
const {theme,setTheme} = React.useContext(ThemeContext);
// theme: Temaya erişmek için içeriği 'dark' veya 'light'
// setTheme: Temayı değiştirmek için örneğin: setTheme('light')

MaterialUI Bileşenlerine Dinamik Tema Verme

MaterialUI bileşenlerine sitil vermek için MaterialUI’nin sunduğu styled kullanılabilir. Kullanımı ise aşağıdaki gibidir:

import {styled} from "@mui/material/styles";
const StyledComponent = styled(ComponentIsmi)(({theme}) => ({
   stiller
}));

Burada theme ile belirtilen kısma tema sağlayıcısının sunduğu theme değeri prop olarak verilmelidir. Örneğin MaterialUI Button bileşenin değiştirilerek özel bileşen yapılması için src/Components/ThemedComponents/StyledButton.jsx dosyasına:

Aynı şekilde tema ile dinamik Input bileşeni oluşturmak için StyledButton.jsx ile aynı dizinde StyledInput.jsx dosyasına:

Temalandırma

Diğer bileşenlerin kodlarını yazının uzunluğundan dolayı burada paylaşmıyorum. Ancak değinilmesi gereken birkaç önemli noktalardan biri temanın bileşenlere sunulması için App.js kök bileşenimize:

Aşağıdaki kod örneğindeki gösterildiği gibi tema değişimi sağlanabilir:

Yukarda bahsedilen projenin son haline buradan ulaşabilirsiniz.