Question

我正在使用react语义ui，并且我想为Table组件添加左边距和上边距（即，将其居中对齐），我也想减小Table内的单元格大小，但是我的CSS无法正常工作，为什么呢？我是否需要添加任何CSS加载程序或Scss加载程序？我不明白为什么我的CSS代码不起作用？

注意：表组件有一个名为className的道具，我想利用className道具并添加自定义样式。链接：https://react.semantic-ui.com/collections/table/#types-pagination

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;

updatePage.css：

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

以上代码有效，即javascript有效，但CSS无效，为什么？请参见屏幕截图：https://imgur.com/a/sBEUA6J我看不到左边距的任何空白。

Answer 1

要在create-react-app中使用CSS模块，您需要将CSS文件重命名为updatesPage.module.css。

您可以在user guide的“添加CSS模块样式表”部分中找到有关此文档的信息

Answer 2

行导入CSS的问题。导入CSS时，无需为其指定模块名称。只需按如下所示更改导入行，它将起作用

import './updatesPage.css';

还如下更改className的代码

<Table celled className='updateForm'>

在设置CSS时，像sematic ui优先。因此，您需要在CSS中更改优先级，添加！important 。

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

如何在创建React应用中使用CSS模块（反应语义ui）？

2 个答案: