2

我正在使用 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>
    )
  }
}
4

1 回答 1

0

“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可以让您只设置标题的样式。

于 2020-02-12T00:33:31.537 回答