我正在创建一个React应用，并且某些JSX出现了问题。我试图覆盖语义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;
}
这是我的index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="logo192.png" />
<link rel='stylesheet' href="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>React App</title>
<script src="https://kit.fontawesome.com/f75e8c1873.js" crossorigin="anonymous"></script>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
像这样更正。
.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>问题是我不想正确导入样式表。 JSX本身是正确的