Question

过去几天我一直在学习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时出现双重导入方案？

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

Answer 1

如果您正在使用react-semantic-ui，那么您已经包含了旧的语义-ui.min.css＆＃39;已经。请参阅here。

因此，创建一个组件并将这些代码放在render（）中，更改＆＃39; class＆＃39;到＆＃39; className＆＃39;然后使用它。

Semantic-UI-React Footer

1 个答案: