如何在React语义UI中调整表组件的大小？

Question

如何在react语义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选择器，请参见屏幕截图。

Answer 1

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

Table.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>
    );

style.css

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