时间戳

首页 > 解决方案 > 如何在反应语义ui中调整表格组件的大小？

html - 如何在反应语义ui中调整表格组件的大小？

问题描述

如何在反应语义 ui 中修改表格单元格的大小？我正在使用名为 updatesPage 的功能组件，但 CSS 不起作用，为什么会这样？

代码：

        import { Icon, Label, Menu, Table } from 'semantic-ui-react';

        const UpdatesPage = () => (
            <Table celled>
              <Table.Header>
                <Table.Row>
                  <Table.HeaderCell>Header</Table.HeaderCell>
                  <Table.HeaderCell>Header</Table.HeaderCell>
                  <Table.HeaderCell>Header</Table.HeaderCell>
                </Table.Row>
              </Table.Header>

              <Table.Body>
                <Table.Row>
                  <Table.Cell>Cell</Table.Cell>
                  <Table.Cell>Cell</Table.Cell>
                  <Table.Cell>Cell</Table.Cell>
                </Table.Row>
                <Table.Row>
                  <Table.Cell>Cell</Table.Cell>
                  <Table.Cell>Cell</Table.Cell>
                  <Table.Cell>Cell</Table.Cell>
                </Table.Row>
                <Table.Row>
                  <Table.Cell>Cell</Table.Cell>
                  <Table.Cell>Cell</Table.Cell>
                  <Table.Cell>Cell</Table.Cell>
                </Table.Row>
              </Table.Body>
            </Table>
        )

    export default UpdatesPage;

CSS：

.ui.table thead th {
    width: 30px;
}

.ui.table tbody td {
    width: 30px;
}

CSS 不工作为什么会这样？我是否选择了错误的 css 选择器，请参阅屏幕截图。 在此处输入图像描述

标签： htmlcssreactjs

解决方案

Semantic UI React在表格、标题、行和单元格上接受 className 参数。使用以下代码和样式导入，您可以更改表格的整体外观。您可以在此处查看预览。

表.js

import "./style.css";
const UpdatesPage = () => (
      <Table celled>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell>Header</Table.HeaderCell>
            <Table.HeaderCell>Header</Table.HeaderCell>
            <Table.HeaderCell>Header</Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          <Table.Row>
            <Table.Cell className="blue-with-padding">Cell</Table.Cell>
            <Table.Cell className="yellow-with-large-padding">Cell</Table.Cell>
            <Table.Cell>Cell</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>Cell</Table.Cell>
            <Table.Cell>Cell</Table.Cell>
            <Table.Cell>Cell</Table.Cell>
          </Table.Row>
          <Table.Row>
            <Table.Cell>Cell</Table.Cell>
            <Table.Cell>Cell</Table.Cell>
            <Table.Cell className="four-hundred-width">Cell</Table.Cell>
          </Table.Row>
        </Table.Body>
      </Table>
    );

样式.css

   .blue-with-padding {
      padding: 5px !important;
      background: blue;
    }
    .yellow-with-large-padding {
      padding: 70px !important;
      background: yellow;
    }
    .four-hundred-width {
      width: 400px;
    }

推荐阅读