Question

我是Semantic / React / Express的新手。如何在React中包含Semantic的样式表？我是否需要一个直接链接到Semantic 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 docs：

由于JSX是JavaScript，因此不鼓励使用类和for等标识符作为XML属性名称。相反，React DOM组件分别需要DOM属性名称，如className和htmlFor。

Answer 2

在您的React组件中使用className代替class。

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

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

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

如何在React和Express中使用语义UI？

2 个答案: