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

Question

我正在尝试覆盖语义 UI 的 CSS 样式，但是它不起作用，即使我为相关 class。这是我的代码：

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

使用更具体的规则来覆盖其他样式。

Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector. When multiple declarations have equal specificity, the last declaration found in the CSS is applied to the element. Specificity only applies when the same element is targeted by multiple declarations. As per CSS rules, directly targeted elements will always take precedence over rules which an element inherits from its ancestor.

详细了解 Specificity。

.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>

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

Why cant I override Semantic UI CSS?

javascript

css

flexbox

semantic-ui