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

【问题标题】：Why cant I override Semantic UI CSS?为什么我不能覆盖语义 UI CSS？
【发布时间】：2019-10-22 12:26:16
【问题描述】：

我正在尝试覆盖 Semantic 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;
}

【问题讨论】：

如@N'Bayramberdiyev 提到的那样，或者您可以将!important 添加到每个值的末尾，如display: flex !important; 以告诉CSS 处理器您的规则应该覆盖冲突的规则。跨度>

标签： javascript css flexbox semantic-ui

【解决方案1】：

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

Specificity 是应用于给定 CSS 声明的权重，由匹配中每个选择器类型的数量决定选择器。当多个声明具有相同的特异性时，最后一个在 CSS 中找到的声明应用于元素。特异性仅适用于多个目标相同的元素声明。根据 CSS 规则，直接定位的元素将始终优先于元素从其继承的规则祖先。

阅读更多关于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>

【讨论】：