Javascript 如何在创建react应用程序中使用css模块（react语义ui）？

我正在使用react语义ui，我想为表格组件添加左边距和顶部边距（即，将其居中对齐）。我还想减小表格中的单元格大小，但我的css不起作用。为什么？我需要添加任何css加载程序或scss加载程序吗？我无法理解为什么我的CSS代码不能工作

注意：表组件有一个名为className的道具，我想利用className道具并添加自定义样式。链接：

updatePage.js：

    import React, { Component } from 'react';
import { Icon, Label, Menu, Table } from 'semantic-ui-react';
import faker from 'faker';
import s from './updatesPage.css';

const UpdatesPage = () => (
    <Table celled className={s.updateForm}>
      <Table.Header>
        <Table.Row>
          <Table.HeaderCell>Name</Table.HeaderCell>
          <Table.HeaderCell>URN number</Table.HeaderCell>
          <Table.HeaderCell>Parish</Table.HeaderCell>
          <Table.HeaderCell>Last Updated</Table.HeaderCell>
          <Table.HeaderCell>Notes</Table.HeaderCell>
        </Table.Row>
      </Table.Header>

      <Table.Body>
        <Table.Row>
          <Table.Cell>{faker.name.findName()}</Table.Cell>
          <Table.Cell>{faker.random.number()}</Table.Cell>
          <Table.Cell>{faker.address.streetAddress()}</Table.Cell>
          <Table.Cell>{faker.date.weekday()}</Table.Cell>
          <Table.Cell>{faker.random.words()}</Table.Cell>
        </Table.Row>
        <Table.Row>
          <Table.Cell>{faker.name.findName()}</Table.Cell>
          <Table.Cell>{faker.random.number()}</Table.Cell>
          <Table.Cell>{faker.address.streetAddress()}</Table.Cell>
          <Table.Cell>{faker.date.weekday()}</Table.Cell>
          <Table.Cell>{faker.random.words()}</Table.Cell>
        </Table.Row>
      </Table.Body>
    </Table>
)

export default UpdatesPage;

---

上面的代码正在工作，即javascript正在工作，但是CSS不工作，为什么？请参见屏幕截图：我看不到任何空白顶部，留作表格。

要在create react应用程序中使用CSS模块，您需要将CSS文件重命名为UpdatePage.module.CSS

---

您可以在line import CSS问题的“添加CSS模块样式表”部分找到相关文档。导入css时，无需为其指定模块名称。只需按如下所示更改导入行，就可以了

import './updatesPage.css';

还可以更改className的代码，如下所示

<Table celled className='updateForm'>

---

我是否需要在节点模块->反应脚本中的webpack.config文件中进行任何更改？否，CRA使用*.module.css的文件命名约定来指示css模块的使用，否则它会解释为一个常规的css文件。我看到了你们更新的答案，我也在做同样的事情，但它不知道如何减小表格的大小并对齐它？左侧边距和顶部边距不工作我正在使用create react应用程序中的CSS模块。它不工作。注意：我使用的是react语义ui，表组件有一个类名propNo，它不工作。注意：我正在使用react semantic ui->请再次拍摄屏幕截图并上传到这里。看到这个屏幕截图时，我注意到css设置了，但优先级由semantic ui决定，没有更新。所以我已经编辑了答案，请检查一下。您也可以按照@Ryan C just add！回答的步骤进行操作！在css中很重要

<Table celled className='updateForm'>

.updateForm {
    margin-top: 100px !important;
    margin-left: 50px !important;
}