使用 react-data-table-component 时如何更改主标题 css 属性答案

【问题标题】：How to change main title css property while using react-data-table-component使用 react-data-table-component 时如何更改主标题 css 属性
【发布时间】：2020-02-12 00:13:31
【问题描述】：

我正在使用 react-data-table-component 制作表格。数据是通过道具来的。但标题的 CSS 属性没有改变。我认为这是不正确的。

标题：{ 风格： { 字体颜色：'红色'，字体重量：'900' }

另外，我想知道如何在 CSS 文件中进行此样式设置并在此表中使用它。找不到具体的东西。

这是我的完整代码。

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>
    )
  }
}

【问题讨论】：

标签： css reactjs react-data-table-component

【解决方案1】：

"title" 不是 react-data-table-component 支持的 RDT 样式之一。如果您不介意为整个标题设置样式，则该元素包含标题并且可用于设置样式。见：https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.js

您始终可以使用外部样式表并将其导入到您的组件文件中，例如import './DataTable.css'; 您必须查看 DataTable 组件输出的标记，以了解您可以将 CSS 挂接到哪些类/ID/元素上。从快速查看演示表来看，使用选择器 header > div 似乎可以让您只设置标题样式。

【讨论】：