为什么不能覆盖语义UI CSS？

Question

我试图覆盖语义UI的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>