How to change main title css property while using react-data-table-component

I am making the table using a react-data-table-component. The data is coming through props. but the CSS property of the title is not changing. I think it is incorrect.

title: { style: { fontColor: 'red', fontWeight: '900' }

Also, I want to know how I can do this styling in the CSS file and use it in this table. Can not find anything specific.

Here is my full code.

import React, { Component } from 'react';
import DataTable from 'react-data-table-component';

const customStyles = {
  title: {
    style: {
      fontColor: 'red',
      fontWeight: '900',
    }
  },
  rows: {
    style: {
      minHeight: '72px', // override the row height
    }
  },
  headCells: {
    style: {
      fontSize: '20px',
      fontWeight: '500',
      textTransform: 'uppercase',
      paddingLeft: '0 8px'
    },
  },
  cells: {
    style: {
      fontSize: '17px',
      paddingLeft: '0 8px',
    },
  },
};

export default class Datatable extends Component {
  render() {
    return (
      <React.Fragment>
        <DataTable
          title={this.props.title}
          columns={this.props.columns}
          data={this.props.data}
          customStyles={customStyles}
        />
      </React.Fragment>
    )
  }
}

"title" is not one of the RDT styles supported by react-data-table-component. If you don't mind styling the entire header, that element contains the title and is available to style. See: https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.ts

You can always use an external stylesheet and just import it into your component file, e.g. import './DataTable.css'; You'll have to look at the markup that's output by the DataTable component to see what classes/IDs/elements you can hook your CSS onto. From quickly looking at a demo table, it looks like using the selector header > div will let you style just the title.