如何在 React 和 Express 中使用 Semantic UI？

Question

我是 Semantic/React/Express 的新手。如何在 React 中包含语义样式表？我是否需要直接链接到语义 css/JavaScript 文件的 html 文件？现在，我没有使用任何 html 文件。

我的主页，dashboard.jsx:

var React = require('react');
var Layout = require('./layout');

class Dashboard extends React.Component {
  render() {
    return (
      <Layout title={this.props.title}>
        <h1>{this.props.title}</h1>
        <div class="ui three item menu">
          <a class="active item">Editorials</a>
          <a class="item">Reviews</a>
          <a class="item">Upcoming Events</a>
        </div>
      </Layout>
    );
  }
}

Dashboard.propTypes = {
  title: React.PropTypes.string
};

module.exports = Dashboard;

Answer 1

使用 npm 安装包并使用 gulp 构建：

npm install semantic-ui --save

cd semantic/

gulp build

然后您可以将 min.css 文件导入您的 dashboard.js:

import '../semantic/dist/semantic.min.css'

记住在你的 JSX 中使用 className 标识符而不是 class。来自 React 文档：

Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively.

Answer 2

在你的 React 组件中使用 className 而不是 class。

要使用类，只需在 html 文件中正常导入 css 文件即可。 React 最终只会将您的代码呈现为 HTML，如果您的 .css 文件通常存在于导入中，则类将被应用。

要导入 CSS 只需添加到您的 html 文件：

<link rel="stylesheet" href="your_css_here.css">

如何在 React 和 Express 中使用 Semantic UI？

How do I use Semantic UI with React and Express?

javascript

express

reactjs

semantic-ui