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

Question

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

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

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

这是我的完整代码。

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 样式之一。如果您不介意为整个 header 设置样式，则该元素包含标题并且可用于设置样式。参见：https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.js

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

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

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

css

reactjs

react-data-table-component