为什么我的自定义CSS样式不会更改h1标签？

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文件：

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

Answer 1

像这样更正。

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

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

<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" style={style1}> </div>
        <div class="four wide column"></div>
    </div>
</div>