I want to change the background for striped in react-data-table-component?

Issue

here the changes herder row BG color work for me but how we can change the BG color of the striped row.

import React from 'react';
    import DataTable from 'react-data-table-component';
    
    const tableCustomStyles = {
        headRow: {
          style: {
            color:'#223336',
            backgroundColor: '#e7eef0'
          },
        },
        striped: {
            default: 'red'
        },
      }
    
    function App() {
      return (
        <div className="App">
          <h3>DataTable in React - <a href="https://www.cluemediator.com" target="_blank">Clue Mediator</a></h3>
          <DataTable
            title="Employees"
            columns={columns}
            data={data}
            pagination
            highlightOnHover
            striped
            customStyles={tableCustomStyles}
          />
        </div>
      );
    }
    
    export default App;

here I used the react-data-table-component and want to change the customized BG color of the striped row. how can we do that?

Solution

After looking through the documentation for using custom styles found here and the available fields here, it appears you need to nest the striped styles inside of a row object in the style config.

Edit for comment:

To change the order of striped and non-striped rows, you could just swap the colors of the regular rows and striped rows (i.e. set the regular row to have the striped attributes and vise-versa).

Your tableCustomStyles should look like this (for even row stripes):

const tableCustomStyles = {
  headRow: {
    style: {
      color:'#223336',
      backgroundColor: '#e7eef0'
    },
  },
  rows: {
    style: {
      color: "STRIPEDCOLOR",
      backgroundColor: "STRIPEDCOLOR"
    },
    stripedStyle: {
      color: "NORMALCOLOR",
      backgroundColor: "NORMALCOLOR"
    }
  }
}

Answered By - H. Ross