Я создаю приложение реагирования и у меня проблемы с некоторыми JSX. Я пытаюсь переопределить стиль CSS в Semantic UI, однако он не работает, даже если я даю конкретное имя класса соответствующему классу. Вот мой код:
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>