React-data-table -Adding CSS类以动态方式行

import React from 'react';
import DataTable from 'react-data-table';

const data = [
  { id: 1, name: 'John Doe', age: 25 },
  { id: 2, name: 'Jane Smith', age: 30 },
  { id: 3, name: 'Bob Johnson', age: 35 },
];

const columns = [
  { name: 'ID', selector: 'id' },
  { name: 'Name', selector: 'name' },
  { name: 'Age', selector: 'age' },
];

const conditionalRowStyles = (row) => {
  if (row.age < 30) {
    return { className: 'green-row' };
  }
  if (row.age > 30) {
    return { className: 'red-row' };
  }
  return {};
};

const App = () => {
  return (
    <DataTable
      title="User Data"
      columns={columns}
      data={data}
      conditionalRowStyles={conditionalRowStyles}
    />
  );
};

export default App;