Почему я не могу переопределить Semantic UI CSS?

Question

Я пытаюсь переопределить стиль CSS семантического пользовательского интерфейса, однако он не работает, хотя я даю конкретное имя класса соответствующему классу. Вот мой код:

return (
    <div className="ui grid">
        <div className="three column row">
            <div className="four wide column" ></div>
            <div className="text eight wide column"> <h1>Team Selection</h1></div>
            <div className="four wide column"></div>    
        </div>
        <div className= "three column row">
            <div className="four wide column"></div>
            <div className="eight wide column" style={style1}> </div>
            <div className="four wide column"></div>
        </div>
    </div>  
)

Файл CSS:

.text {
    display: flex;
    justify-content: center;
}

Answer 1

Используйте более конкретные правила для переопределения других стилей.

Специфичность - это вес, который применяется к данному объявлению CSS и определяется числом каждого типа селектора в соответствующем селекторе. Когда несколько объявлений имеют одинаковую специфичность, последнее объявление, найденное в CSS, применяется к элементу. Специфичность применяется только тогда, когда один и тот же элемент нацелен на несколько объявлений. Согласно правилам CSS, элементы с прямым таргетингом всегда будут иметь приоритет над правилами, которые элемент наследует от своего предка.

Подробнее о Специфичность .

.ui.grid > .row > .column.text {
    display: flex;
    justify-content: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"></script>

<div class="ui grid">
    <div class="three column row">
        <div class="four wide column" ></div>
        <div class="text eight wide column"> <h1>Team Selection</h1></div>
        <div class="four wide column"></div>    
    </div>
    <div class="three column row">
        <div class="four wide column"></div>
        <div class="eight wide column"> </div>
        <div class="four wide column"></div>
    </div>
</div>