Как изменить свойство основного заголовка css при использовании response-data-table-component - PullRequest
Новая
       26

Как изменить свойство основного заголовка css при использовании response-data-table-component

2 голосов
/ 12 февраля 2020

Я создаю таблицу, используя компонент таблицы данных реакции. Данные поступают через реквизит. но свойство CSS заголовка не меняется. Я думаю, что это неправильно.

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

Кроме того, я хочу знать, как я могу сделать этот стиль в CSS файл и используйте его в этой таблице. Не могу найти ничего указанного c.

Вот мой полный код. 

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

1 Ответ

0 голосов
/ 12 февраля 2020

"title" не является одним из стилей RDT, поддерживаемых компонентом response-data-table-component. Если вы не возражаете против стилизации всего заголовка, этот элемент содержит заголовок и доступен для стиля. См .: https://github.com/jbetancur/react-data-table-component/blob/master/src/DataTable/styles.js

Вы всегда можете использовать внешнюю таблицу стилей и просто импортировать ее в файл компонента, например, import './DataTable.css';. Вам нужно будет посмотреть на разметку, которая выводится Компонент DataTable, чтобы увидеть, к каким классам / идентификаторам / элементам вы можете подключить CSS. Если вы быстро посмотрите на демонстрационную таблицу, вы увидите, что использование селектора header > div позволит вам стилизовать только заголовок.

...