Looking to change the font text color in the filter section of the react-data-table-component-extensions?

Can anyone offer some assistance with this issue?

I am currently using react-data-table-component along with react-data-table-component-extensions. I have also imported the index.css for the component-extension.

import DataTable from "react-data-table-component";
import DataTableExtensions from "react-data-table-component-extensions";
import "react-data-table-component-extensions/dist/index.css";

Below is the code for the dataTable in the jsx file

<DataTableExtensions
        columns={column}
        data={parameters}
        print={false}
        export={false}
        filterPlaceholder="Filter Parameter"
      >
        <DataTable
          title="Parameter List"
          columns={column}
          data={parameters}
          pageSize={5}
          pagination
          fixedHeader
          fixedHeaderScrollHeight="450px"
          highlightOnHover
          actions={<AddParameter loadParameters={loadParameters} />}
        />
      </DataTableExtensions>

My issue lies with the display aspect - the font does not match the background of the application and appears too dark.

https://i.sstatic.net/y9JZI.png

I have attempted to change the text color to white, but I am unable to style the react data table extension component.

I have tried manipulating the index.css file that I imported, but with no success. I also attempted to remove all the CSS from the index.css file, but still saw no change.

Am I modifying the wrong CSS file, or is this component not customizable?

Answer №1

If you want to customize the font color in the filter section of react-data-table-component-extension, you can easily do so by adding CSS to your stylesheet. Below is a snippet of code that not only changes the font color but also allows you to style the border and border radius. Feel free to adjust the properties to suit your preferences:

.data-table-extensions>.data-table-extensions-filter>.filter-text { 
   border: var(--bs-border-width) solid var(--bs-border-color) !important; 
   border-radius: var(--bs-border-radius) !important; 
   outline: none; 
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !important; 
   font-size: 1rem !important; 
   font-weight: 400 !important; 
   line-height: 1.5 !important; 
   color: var(--bs-body-color) !important; 
   background-color: var(--bs-body-bg); 
   background-clip: padding-box !important; 
   font-family: inherit !important; 
 } 

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The most effective way to code overlapping html buttons

Can you help me figure out how to make clickable areas on my HTML5 web page without them overlapping? Here's what I'm trying to do: I want the red, blue, and green areas to be clickable links, but not overlap. For example, when clicking on the f ...

I am interested in accessing the information of the currently logged-in user

I am new to AngularJS and I am looking for help on retrieving information about the logged-in user. I want to be able to display this information but I'm not sure where to start. Here is my main Angular controller: var myApp = angular.module('my ...

During the rendering process, a referenced computed property is not defined on the instance

Description: In my child component, I am working with an array called expenseButton that is passed as props. The array contains objects with values which I need to calculate the sum of using the array.reduce() method. Issue: While I can successfully get ...

creating a picture within a frame

the code : function DrawFirstRow() { Position = 1; width = 84; height = 84; startX = 28; startY = 28; for (index = 0; index < canvasWidth; index += 28) { /// use += ctx.drawImage(tankImage, (Position ...

Error: Attempting to access properties of an undefined variable (specifically 'document') is not allowed

The other day, while working on a project, I encountered an issue with my GraphQL implementation using the JavaScript graphql-request library. Here is the snippet of code that caused the error: import { request, gql } from 'graphql-request' const ...

The requestify Node module encounters issues when the body contains special characters

My current project involves the use of node.js and a library called requestify. Here is the snippet of code causing some trouble: console.log('body'); console.log(body); return new Promise(function (f, r) { requestify.request(myurl, { ...

Efficiency levels of reach = within angular instructions

Creating a directive can be done in various ways. Here is an example of how I structured mine: 'use strict'; myApp.directive('mySwitchOnOff', [ '$rootScope', function($rootScope) { return { restrict: 'C' ...

Leverage the power of TypeScript by enabling the noImplicitAny flag when working

Currently, I am looking to activate the noImplicitAny flag in my compiler. My main issue lies with utilizing lodash/fp as there are no typings available at this moment. Due to this, the compiler is generating errors due to the absence of a definition file ...

Refreshing Javascript with AngularJS

I'm encountering an issue while starting my angular js application. On a html page, I have divs with icons and I want the background color to change on mouse over. This is working using jquery's $(document).ready(function(){ approach. The conten ...

Encountered a syntax issue when attempting to modify state in React.js

I encountered a syntax error when trying to update the state in React.js with the following code. import { FETCH_POSTS } from '../actions/index'; const INITIAL_STATE = { all:[], post: null }; export default (state = INITIAL_STATE, action) => ...

Develop a cross-platform application using webpack for both web browsers and Node.js

I'm currently developing my first module, and the code is almost identical for both browser and node.js versions. The only variance lies in the use of XmlHttpRequest for the browser and the http module for node.js. Here's a sample code snippet t ...

Children divs unexpectedly showing up outside of their parent divs

I have reviewed similar questions on this matter, but none of them seem to provide a solution for the issue I am facing. Currently, my goal is to display a stylized list, but I am encountering more difficulties than expected. You can find a fiddle linked ...

Show off a font-awesome icon overlapping another image

My task involves fetching image source from a JSON file and then displaying it on an HTML page. https://i.sstatic.net/coOaU.png I also need to overlay a Font Awesome icon on top of the image as shown below: https://i.sstatic.net/nbrLk.png https://i.sst ...

Adding an Ajax response to a div in HTML: A step-by-step guide

How can I add Ajax response to a div in my HTML code? Below is my ajax script: $(document).ready(function(){ $('.credit,.debit').change(function(){ var value=$(this).val(); $.ajax({ type:"POST", url:" ...

I'm having trouble removing an element from an array. The splice() method doesn't seem to be working properly

I start by creating an array like this: let myArray = []; Next, I add Number elements to the array: myArray.push(myNumber); When I call myArray.toString(), the array looks like this: 1,4,3,9 I have been attempting to remove certain elements using t ...

Switching the sorting criteria from 'AND' to 'OR' in the JPList library

I am currently exploring the use of JPList to sort on multiple items. As it stands, JPList searches like 'AND' when sorting (e.g. sorting based on an item with tags html, php and jQuery all together), but I am interested in filtering through all ...

What are the techniques used to minimize JavaScript functions?

Is there a more efficient way to reduce the amount of JavaScript code needed for functions that share the same call procedure? I'm struggling to find a clear explanation but here's the code snippet below... JavaScript: $(function() { $( &a ...

After successful login, the user will be automatically directed to the next page with

I am encountering challenges with a specific portion of my code. I am in the process of sending user information to the server, receiving a token from the user, and then aiming to redirect the user to a URL. However, despite the code entering the if stat ...

Creating dynamic bar chart visuals using Morris.js with JSON responses

Utilizing the morris.js library, I am extracting and plotting bar charts from data retrieved through a webservice. Issue: The format of my webservice URL is as follows: http://localhost:9999/hellowebservice/search?select=* I populate the select query ...

Variability in the values returned by the useState hook

Currently, I am working on developing my initial user signup form, and I have encountered a challenge that seems relatively simple to resolve but goes beyond my current expertise. The issue pertains to the helperText for an MUI select component which is no ...