style the button but it doesn't seam to work

[Cariaga]

<script>
  // Import the Grid component from the "gridjs" library
  import { Grid } from "gridjs";
  import { onMount } from "svelte";
  let data = [{"findName": "John Doe2","email": "[email protected]","title": "Software Engineer","companyName": "ABC Inc.1"}]
  // Create a function to initialize the grid
  function initializeGrid() {
    // Create a new instance of the Grid component
    const grid = new Grid({
      columns: [{ name: 'findName',hidden: false},{ name: 'email',hidden: false},{ name: 'title',hidden: false},{ name: 'companyName',hidden: false}],
      data: data,
      resizable: true,
      sort: true,
      search: true,
      pagination: {limit:1},
      style: {
        table: { border: '3px solid #ccc'},
        paginationButtonNext :{ border: '3px solid #ccc'},//issue here
        search :{border: '3px solid #ccc'}// issue here
    },
    });
    // Mount the grid to a DOM element with the ID "grid-container"
    grid.render(document.getElementById("grid-container"));
  }

  // Call the initializeGrid function when the component is mounted
  onMount(() => {
    initializeGrid();
  });
</script>
<div id="grid-container" ></div>
<!-- Import the external CSS file and apply it globally -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.css">

[Cariaga]

nvm i figured it out https://gridjs.io/docs/examples/css-in-js and https://gridjs.io/docs/config/className worked for me

<script>
  // Import the Grid component from the "gridjs" library
  import { Grid } from "gridjs";
  import { onMount } from "svelte";
  import { css } from '@emotion/css';
  // Create a function to initialize the grid
  function initializeGrid() {
    // Create a new instance of the Grid component
    const grid = new Grid({
      columns: ['Name', 'Email', 'Phone Number'],
      search: true,
      pagination:{limit:2},

      data: [
        ['John', '[email protected]', '(353) 01 222 3333'],
        ['Mark', '[email protected]',   '(01) 22 888 4444'],
        ['Eoin', '[email protected]',   '(05) 10 878 5554'],
        ['Nisen', '[email protected]',   '313 333 1923']
      ],
      className: {
        container: css`
          * {
            font-family: 'Tahoma';
          }
        `,
        table: css`
          tr:hover td {
            background-color: rgba(0, 0, 0, 0.1);
          }
        `,
        th: css`
          text-align: center;
          &:hover {
            background-color: #999;
            color: #fff;
          }
        `,
        td: css`
          color: #999;
          &:hover {
            color: #000;
          }
        `,
        search: css`
          background-color: yellow;
          padding:0px !important;
          & > input {
            background-color: yellow;
            color: black;
            padding:0px !important;
          }
          & > input::placeholder {
            color: black;
            background-color: yellow;
            padding:0px !important;
          }
        `
      }
    });
    // Mount the grid to a DOM element with the ID "grid-container"
    grid.render(document.getElementById("grid-container"));
  }

  // Call the initializeGrid function when the component is mounted
  onMount(() => {
    initializeGrid();
  });
</script>
<div id="grid-container"></div>
<!-- Import the external CSS file and apply it globally -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridjs/dist/theme/mermaid.css">