使用反应更改动态表头的字体大小答案

【问题标题】：Change font size of dynamic table header using react使用反应更改动态表头的字体大小
【发布时间】：2021-11-27 06:07:32
【问题描述】：

我正在处理一个我们正在创建 UI 的项目，我正在尝试使用 react 更改表格单元格的字体大小，但无论我做什么似乎都不起作用...我尝试使用“fontSize : 30," 以及 fontSize: "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,
        },
      ],
  };
};

我会很感激任何想法

【问题讨论】：

标签： javascript java jquery node.js reactjs

【解决方案1】：

单元格不使用 fontSize 属性。这就是为什么它不适合你。但是您可以使用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 内嵌套元素的样式属性。我为td 标签添加了font-size 样式。

查看CodeSandbox 上的代码，在我添加它的地方添加td{font-size:30px} 以查看其效果。您可以在Wrapper 中设置任何您想要的样式，只需确保添加正确的类/标签/id。

并查看细胞实际可以使用的道具：

图片来源：@atlaskit/dynamic-table docs

【讨论】：