Skip to main content

Implementasi Tema Alurkerja

Theme alurkerja berbeda dengan tema yang ada dilibrary pada umumnya, di library lain umumnya untuk theme itu dibedakan dari file css nya misal tema 1 maka akan menggunakan theme1.css, jika tema 2 maka akan menggunakan theme2.css . namun di alurkerja-ui thema merupakan cara untuk mengcustom className dari komponennya alurkerja contiohnya TableLowcode

element yang sudah memiliki ID adalah element yang sudah bisa dicustom className nya via theme, jika belum ada berarti belum bisa dicustom via thema

Contoh​

Header nya TableLowcode picture 0

jika dilihat di gambar elemen ini memiliki id table_header, id ini lah yang digunakan untuk mengcustomClassName nya contoh 

import { Theme, themeConfig } from 'alurkerja-ui'

export const theme: Theme = {
  ...themeConfig,
  table_header: 'test',
}

fungsi theme ini harus diteruskan ke context menggunakan ThemeContext

import { ThemeContext } from 'alurkerja-ui'
<ThemeContext.Provider value={theme}>
  <RouterProvider router={router} />
</ThemeContext.Provider>

hasilnya table_header akan memiliki className 'test'

picture 1