Kodcular
Published in

Kodcular

Styled Component ile Dinamik Css Yazmak

Çalıştığım projede tasarımı dinamik olarak render edilen componentlere ihtiyacımız oldu. Detaylandırmak gerekirse, default bir butonumuz var fakat bu butonu isteyen kişi istediği gibi stillerini customize edebilecek ve özelleştirilmiş stilleri içeren JSON Frontend’e geldiğinde buna uygun bir çıktı elde edecek.

Buradaki asıl sıkıntımız ise, var olan CSS’lerin üzerine yeni bir CSS basıldığında tarayıcıya kullanılmayacak birçok CSS’in basılacak ve ezilecek olmasıydı.

Bu makalede bunu nasıl aştığımı anlatacağım.

Styled Component Nedir?

Styled Component, JavaScript dosyasında CSS yazmamıza olanak sağlayan, React’taki componentlerde olduğu gibi propslar alabilen, critical CSS özelliği bulunan, farklı temalarla CSS componentleri oluşturmanızı sağlayan bir kütüphane.

Parametre alabilmesi sayesinde dinamik CSS’ler oluşturmayı sağlıyor. Parametre alabilen örnek bir buton;

import styled, { ThemeProvider } from "styled-components"const Button = styled.button`
background-color: ${({theme}) => theme.backgroundColor};
border: 1px solid rgba(0 0 0 / 10%);
border-radius: ${{theme} => theme.borderRadius};
color: ${{theme} => theme.color};
cursor: pointer;
font-size: 14px;
font-weight: 400;
height: 40px;
padding-left: 16px;
padding-right: 16px;
transition: .2s ease-out;
&:hover {
background-color: ${{theme} => theme.hoverBackgroundColor};
}
`;

Yukarıdaki kodda Button adında bir CSS componenti parametre alacağı theme adında bir objeden besleniyor. Eğer bir stil içeren parametre gelmezse default olarak belli stillerimi kullanabilmek adına bir defaults objesi oluşturdum.

const defaults = {
color: "#fff",
backgroundColor: "#4caf50",
borderRadius: "4px",
hoverBackgroundColor: "#4caf50"
};

Object.assign() yardımıyla API’den özelleştirilmiş bir stil dosyası gelirse defaults ile değiştirilmesini sağlayabiliyoruz.

export default function App({theme, children, ...attr}) {
// Parametre olarak stil içeren bir theme dosyası alıyoruz
const css = Object.assign(defaults, theme);
// Burada API'den bir stil objesi gelirse varsayılan CSS'imizin yerine geçmesini sağlıyoruz return (
<ThemeProvider theme={css}>
// Styled Component bileşeni olan ThemeProvider ile dinamik stilli bir buton oluşturuyoruz
<Button {...attr}>{children}</Button>
</ThemeProvider>
)
}

Oluşturduğumuz Button componentini çağıralım; ilk örnek herhangi bir ek stillendirme istemeyen ve default stille render edilecek olan butonumuz, ikinisi ise dataAPI adında bir JSON’dan besleniyor ve yeniden stillendiriliyor.

<Button>
Default Buton
</Button>
<Button theme={dataAPI}>
APIden Stillenen Buton
</Button>
// Backendden geleceğini düşündüğümüz bir JSON örneği
const dataAPI = {
color: "#fff",
backgroundColor: "#0070f3",
borderRadius: "28px",
hoverBackgroundColor: "blue"
};

Sonuç olarak bir CSS kodu ezilmiyor. Yani önce default kırmızı olan buton, sonradan inline CSS ile ezilerek maviye dönüşmüyor; direkt mavi bir buton oluşturuluyor.

Kişisel Blog Sitem: omergulcicek.com

Makaleyi alkışlayarak destek olabilirsiniz 🌹

--

--

--

Bu yayın yazılım üzerine üretilen blogların bir araya geldiği Türkçe yayındır.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Ömer Gülçiçek

Ömer Gülçiçek

Frontend Developer

More from Medium

How to listen to Formik onChange event in React?

How to test a React App, with Jest and react-testing-library

Aliases in React, Jest and VSCode

Getting started with a PureScript React project