尝试使用 reactjs 和语义创建英雄形象 ui

Question

我正在尝试使用 React 和 Semantic UI 的组合创建一个页面顶部有英雄形象的网站（这正是我在我参加的课程中学到的）。

这是组件：

import React from "react";
import "./App.css";

const App = () => {
    return (
        <div class='ui inverted vertical masthead center aligned segment'>
            <div class='ui text container'>
                <h1 class='ui inverted header'>My name</h1>
                <h2>My role</h2>
                <div class='ui huge primary button'>
                    Get Started <i class='right arrow icon'></i>
                </div>
            </div>
        </div>
    );
};

export default App;

这里是 CSS：

.ui.masthead {
    padding: 10%;
    background-image: url('../../assets/space.jpg') !important;
    background-repeat: no-repeat !important;
    background-size: cover;
}

显示如下： Small screen webpage

很好，但是当我展开页面时，我得到以下信息：

large screen webpage with black bar on the side

怎么才能停止边上的黑条？我原以为图像会调整到更大以适应页面而不是显示黑色背景颜色。

我尝试添加 width: 100% 但遇到了同样的问题。

Answer 1

好吧，奇怪的是，出于某种原因，我发布的确切代码在 Codepen 上运行良好，但在我的本地计算机上无法运行。

但是，我设法通过向我的 CSS 添加一个 .segment 选择器来让它工作（所以我假设这是导致问题的段的样式问题）所以我的 CSS 现在看起来像这样：

.ui.masthead.segment {
    padding: 10%;
    background-image: url("../../assets/space.jpg") !important;
    background-repeat: no-repeat !important;
    background-size: cover;
    width: 100% !important;
}

它可以正常工作。

感谢所有试图提供帮助的人！

尝试使用 reactjs 和语义创建英雄形象 ui

Trying to create a hero image using reactjs and semantic ui

html

css

reactjs

semantic-ui