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

Question

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

title: { style: { fontColor: 'red', fontWeight: '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>
    )
  }
}

Answer 1

“title”不是 react-data-table-component 支持的 RDT 样式之一。如果您不介意对整个标题进行样式设置，则该元素包含标题并且可用于设置样式。请参阅:https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.ts

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