Нижний колонтитул Semantic-UI-React

Я изучаю ReactJS последние пару дней и пытаюсь создать веб-сайт, используя semantic-ui-react в ReactJS. Я понимаю, что есть компоненты, которые можно использовать сейчас, но я застрял в том, что делать в таком сценарии, как создание нижнего колонтитула ... обычно в моем необработанном 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. Нижний колонтитул - это класс, который по умолчанию не является компонентом, поэтому для него нет компонента ... Что, как я предполагаю, означает, что мне нужно создать свой собственный компонент и в основном написать код, приведенный выше. Моя проблема сейчас в том, что я не знаю, как сделать так, как если бы я использовал обычный старый файл semantic.min.css. Я где-то читал, чтобы загрузить файл css и включить его, но во-первых, я не знаю, куда (MyCustomFooterComponent или index.html), и при этом я не увеличиваю время загрузки на моем веб-сайте. Означает ли это, что везде, где есть нижний колонтитул, только для одного небольшого участка пользовательского кода, будет загружен весь файл CSS?

Кроме того, будет ли после сборки сценарий двойного импорта из моего добавления семантического CSS и semantic-ui-react CSS?

Извините за длинный вопрос, но я новичок в этом, и мне нравится выяснять, что я могу, прежде чем совершить ужасную ошибку.