时间戳

首页 > 解决方案 > 如何在创建反应应用程序中使用 css 模块（反应语义 ui）？

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

问题描述

我正在使用反应语义用户界面，我想为表格组件添加左侧边距和顶部边距（即在中心对齐）我还想减小表格内的单元格大小，但我的 css 无法正常工作，为什么会这样？我需要添加任何 css loader 或 scss loader 吗？我无法理解为什么我的 CSS 代码不起作用？

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

更新页面.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;

更新页面.css：

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

上面的代码可以工作，即 javascript 可以工作，但 CSS 不能工作，为什么会这样？见截图：https ://imgur.com/a/sBEUA6J我看不到任何边距顶部，留给表格。

标签： javascripthtmlcssreactjs

解决方案

为了将 CSS 模块与 create-react-app 一起使用，您需要将您的 css 文件重命名为 updatesPage.module.css。

您可以在用户指南的“添加 CSS 模块样式表”部分找到相关文档

推荐阅读