Блог

Я работаю над проектом, в котором мы создаем пользовательский интерфейс, и я пытаюсь изменить размер шрифта ячеек моей таблицы с помощью react, но что бы я ни делал, это, похоже, не работает… я пытался использовать «Размер шрифта: 30», а также размер шрифта: «30pt», но, похоже, ничего не работает

 
import React, {Component} from "react";
import DynamicTable from '@atlaskit/dynamic-table';

export const caption = 'List of Addon Version';

export const createHead = (withWidth) => {
    return {
      cells: [
        {
            
          key: 'pluginName',
          content: 'Plugin Name',
          shouldTruncate: true,
          isSortable: true,
          fontSize: 30,
          width: withWidth ? 25 : undefined,
             
        },
        
        {
      key: 'pluginVersion',
          content: 'Plugin Version',
          shouldTruncate: true,
          isSortable: true,
          width: withWidth ? 25 : undefined,
      fontSize: 30,
        },
        {
          key: 'jiraVersion',
          content: 'Jira Version Group',
          shouldTruncate: true,
      width: withWidth ? 25 : undefined,
      isSortable: true,
      fontSize: 30,
        },
        {
     key: 'pluginKey',
     content: 'Plugin Key',
     shouldTruncate: true,
     width: withWidth ? 25 : undefined,
     fontSize: 30,
        },
      ],
  };
};
 

я был бы признателен за любые идеи

Ну, ячейки не принимают реквизит размера шрифта. Вот почему это не работает на вас. Но вы можете использовать styled-components для настройки стиля таблицы. Посмотрите пример ниже.

 import React from 'react';

import styled from 'styled-components';

import DynamicTable from '@atlaskit/dynamic-table';

import { caption, head, rows } from './design-system/dynamic-table/examples/content/sample-data';

const Wrapper = styled.div`
  min-width: 600px;
  td{font-size:30px}
`;

// eslint-disable-next-line import/no-anonymous-default-export
export default class extends React.Component<{}, {}> {
  render() {
    return (
      <Wrapper>
        <DynamicTable
          caption={caption}
          head={head}
          rows={rows}
          rowsPerPage={5}
          defaultPage={1}
          isFixedSize
          defaultSortKey="term"
          defaultSortOrder="ASC"
          onSort={() => console.log('onSort')}
          onSetPage={() => console.log('onSetPage')}
        />
      </Wrapper>
    );
  }
}
 

Стилизованный div Wrapper имеет атрибут ширины, но мы также можем вложить атрибуты стиля для элементов внутри Wrapper . Я добавил font-size стиль для td тегов.

Проверьте код в CodeSandbox, добавьте td{font-size:30px} место, где я его добавил, чтобы увидеть его эффекты. Вы можете стилизовать все , что захотите Wrapper , просто не забудьте добавить правильные классы / теги / идентификаторы.

И проверьте реквизиты, которые клетки действительно могут принимать:

Источник изображения: @atlaskit/dynamic-table docs