So i am using angular-datatable 18.0.0 the issue is i am trying to remove the hover effect from the dt pagination button

    

        + Add
    
    

        
    

this.dtOptions = {
      pagingType: 'simple_numbers',
      searching:true,
      ordering: false,
      language:{
        search: '',
        searchPlaceholder: 'Search by Date, Added by, Main Concern',
        paginate: {
          previous: ' Previous',
          next: 'Next ',
        },
      },
      dom: 'ft<"bottom-wrapper"ip>',
      ajax: (dataTablesParameters: any, callback) => {
        this.suppliersService.getSuppliersList().subscribe(resp => {
          callback({
            data: resp
          });
        });
      },
      lengthMenu: [5, 10, 20, 50],
      columns: [
        { title: 'ID', data: 'id' },
        { title: 'Name', data: 'name' },
        { title: 'Contact Number', data: 'contactNumber' },
        {
          title: 'Actions',
          data: null,
          orderable: false,
          searchable: false,
          className: 'text-center action-column',
          render: (data: any, type: any, row: any) => {
            let view = `
                 
                `;

            let edit = `
                 
                `;

            let del = `
                
               `;

            return `
` + view + edit + del + `
`;
          },
        }
      ],

div.dt-container .dt-paging .dt-paging-button:hover {
  background-color: transparent !important;
  background: transparent !important;
  color: #000000 !important;
}

I have tried adding this css in the global it chnages the hover effect but the color remains white which makes the number to not show so is there any way to change the color to black