Semantic-UI-React 页脚答案

【问题标题】：Semantic-UI-React FooterSemantic-UI-React 页脚
【发布时间】：2017-12-09 20:27:12
【问题描述】：

过去几天我一直在学习 ReactJS，并一直在尝试在 ReactJS 中使用 semantic-ui-react 构建一个网站。我知道现在可以使用一些组件，但是我被困在诸如创建页脚之类的场景中该怎么做……通常，在我的原始 HTML 中，我会包含 semantic.min.css 文件并在底部：

    <div class="ui inverted pink vertical footer segment">
        <div class="ui center aligned container">
            <h4 class="ui inverted header">&copy; Copyright 2017 | All rights reserved | Blahhh</h4>
            <a href="https://www.facebook.com/"><i class="facebook square icon big"></i></a>
            <a href="https://twitter.com/"><i class="twitter square icon big"></i></a>
            <a href="https://www.linkedin.com/company/c"><i class="linkedin square icon big"></i></a>
        </div>
    </div>

现在我想把它翻译成semantic-ui-react。默认情况下，页脚是一个类而不是组件，因此它没有组件......我认为这意味着我必须制作自己的组件并基本上编写上面的代码。我现在的问题是我不知道如何让它像我使用常规的旧语义.min.css 一样呈现。我在某处阅读以下载 css 文件并将其包含在内，但是一个，我不知道去哪里（MyCustomFooterComponent 或index.html），这样做，我的网站上的加载时间不会增加。这是否意味着任何有页脚的地方，只有一小部分自定义代码，整个 CSS 文件都将被加载？

另外，在构建之后，我添加语义 CSS 和 semantic-ui-react 的 CSS 是否会出现双重导入场景？

很抱歉这个问题太长了，但我是新手，我想在犯下严重错误之前找出我能做的事情。

【问题讨论】：

标签： reactjs semantic-ui node-modules semantic-ui-react

【解决方案1】：

如果您使用的是 react-semantic-ui，那么您已经包含了“旧的语义 ui.min.css”。见here。

因此，创建一个组件并将这些代码放入 render() 中，将 'class' 更改为 'className' 然后使用它。

【讨论】：

感谢您的快速回复。但是我应该在我的MyCustomFooterComponent.js 文件中导入什么？它怎么知道引用它？因为对于所有其他语义组件，语法为import { Button } from 'semantic-ui-react' 以使用按钮等...
如果您使用的是create-react-app，那么在您的MyCustomFooterComponent 中导出该组件export default MyCustomFooterComponent; 然后您可以从其他地方导入import MyCustomFooterComponent from './MyCustomFooterComponent.js'
我想我误解了该怎么做。包含 semantic--ui-react 不会自动包含 CSS。我必须手动包含它，然后 classNames 会起作用吗？这不是双重包容吗？首先来自semantic-ui-react，然后来自semantic-ui-css?
> 这不是双重包含吗？不，Semantic UI React 现在不包含任何 CSS，它只生成有效的标记。
@AlexanderFedyashov 我的意思是，如果他遵循提供的链接中的指南，那么他已经包含了“旧语义-ui.min.css”。