Styled System untuk Styled Component Lebih Ekspresif dan Konsisten

Styled System hadir untuk kamu yang menginginkan agar Styled Component lebih ekpresif dan konsiten, maksudnya adalah sebagai berikut. Kita jabarkan dalam satu contoh kasus berikut ya, di web ada 2 macam tema, yakni light mode dan dark mode, dan ambil dua sample component button dan link. kedua component memiliki warna yang sma, anggap light-blue ketika light mode dan dark mode menjadi dark-blue. Kasus seperti ini akan sangat mudah jika kita kembangkan componentnya dengan Styled Sytem, gampangnya mari kita mulai.

Let's Get Started

Untuk sample kasus di postingan ini saya buat di code sandbox ya, bisa cek di link berikut ini https://codesandbox.io/s/styled-system-with-mau-coding-m0nqo?file=/src/App.js . Kita Mulai dengan membuat component awal terlebih dengan Styled Component.

Dan dengan style ini di Button dengan Styled Component Kita menghasilnya tampilan seperti ini.

import Styled from "styled-components";

const ButtonStyled = Styled.button`
color: #FFF;
background-color: #3498db;
border: none;
padding: 10px 15px;
border-radius: 5px;
font-weight: 400;
font-size: 20px;
&:hover {
  cursor: pointer;
  background-color: #4a9ad0;
}
`;

export default ButtonStyled;

styled component on sandbox

Import Required Modules

Dari code Styled Component diatas, mari berfokus ke stylingnya yang semuanya tertulis di styled.js, dengan Styled System itu semua akan berubah, styling tidak akan ada lagi di styled.js tapi akan kita pasang di component as props.

Semua melangkah kestyling, kita import terlebih dahulu modul-module yang dibutuhkan dari Styled System, modul-modul ini dipisahkan berdasarkan style yang dibutuhkan, bisa dibaca selengkapnya di https://styled-system.com/api/ .

Mari kita list style apa yang dibutuhkan.

color
background-color
border
border-radius
padding
font-weight
font-size

Dan jika kita lihat di dokumentasi Api Styled System, makan bisa kita dapatkan modul - modul yang dibutuhkan

styled system api

Ditahapan ini kita baru import modul - modul yang dibutuhkan dari Styled System, tapi style tersebut belum masuk ke component, sehingga tampilan di browser masih style button default.

Start Styling

Untuk styling utama kita setup di component as props, sehingga jika menggunakan style yang sudah kita define sebelumnya, component Button akan menjadi seperti ini.

import ButtonStyled from "./styled";

const Button = (props) => {
  return (
    <ButtonStyled
      color="#FFFFFF"
      bg="#3498db"
      py={10}
      px={15}
      border="none"
      borderRadius={5}
      fontSize={20}
      fontWeight={400}
      onClick={props.onClick}
    >
      {props.children}
    </ButtonStyled>
  );
};

export default Button;

Dan hasil render component Button pun sesuai dengan ekspektasi

Theming

Sesuai dengan slogan Styled System agar component lebih konsisten, theming ini sangat penting, tujuannya agar misal set size, memiliki standar large, medium, small atau lain-lain sesuai kebutuhan. Untuk sampel ini kita akan membuat styling untuk warna, ada buat warna putih dan biru, tujuannya agar style tidak hardcode menggunakan hexcode/rgb di styling melainnya menggunakan konstanta dari config.

// theme.js
export default {
  colors: {
    white: "#fff",
    blue: "#3498db"
  }
};

Untuk bisa menggunakan theme di Styled System, core dari Component perlu di bungkus dengan ThemeProvider dari Styled System , dan import theme.js yang kita buat diatas, as a props.

Dan terakhir tinggal mengubah styling yang masih hardcode untuk menggunakan variabel yang ada di theme.js, dalam kasus ini saya hanya menyediakan styled colors saja, dan menjadi seperti inilah Button component.

import ButtonStyled from "./styled";

const Button = (props) => {
  return (
    <ButtonStyled
      color="white"
      bg="blue"
      py={10}
      px={15}
      border="none"
      borderRadius={5}
      fontSize={20}
      fontWeight={400}
      onClick={props.onClick}
    >
      {props.children}
    </ButtonStyled>
  );
};

export default Button;

Kesimpulan

Hal diatas hanya pembukan untuk kamu jika ingin menggunakan Styled System, banyak hal yang bisa dikembangkan, semisal membuat darkmode, maka kamu cukup deklarasi theme.js yang baru. Disamping itu berkat theme , sebelum membuat component bisa terfokus untuk membuat variabel-variabel style terlebih dahulu, sehingga jika membuat component maka semua akan terstruktur dan sesuai jalur, serta menghindari style-style kreatif buatan dev / tim.

Code Sandbox : https://codesandbox.io/s/styled-system-with-mau-coding-m0nqo?file=/src/App.jsx