时间戳

首页 > 解决方案 > 一种样式不起作用，但另一种样式起作用

javascript - 一种样式不起作用，但另一种样式起作用

问题描述

我正在制作一个网页来玩游戏。它使用两个容器（在一个组件内）。它们显示 2 张图像，但默认情况下它们是空的。我对它们应用了一种样式：img-container 设置尺寸并为背景着色（它必须是黑色），但是该样式不起作用，尽管所有其他样式都可以。

澄清：在开始时，div 使用 2 个类（img-container 和 flex-child，效果很好）。另外，我正在使用 Visual Studio Code。

我已经尝试过：更改类名，重新启动主机（使用“npm start”关闭 VS Code），使用另一个 Web 浏览器（chrome 和 firefox）并更改更大的属性值。这不起作用，但在预先存在的 CSS 类中插入属性并调用它们。

组件代码：

import React, { Component } from 'react';

//Class component
class PPT extends Component {
    render() {
        return (
        <div id = "PPT">
            <h3 id="explanation">¿Cómo se juega? </h3>
            <div id="container" className="flex-parent">
                <div id="player_hand" className="flex-child">
                    <h2>Jugador</h2>
                    <div className="img-container"></div>
                </div>
                <div id="computer_hand" className="flex-child">
                    <h2>Computadora</h2>
                    <div className="img-container"></div>
                </div>
            </div>
        </div>
        )
    }
}

export default PPT;

CSS 样式：

#PPT {
  margin-top: 90px;
  margin-bottom: 15px;
}
#img-container {
  background-color: #262626;
  width: 474px;
  height: 266px;
}

标签： javascripthtmlcssreactjs

解决方案

错误的部分是 JSX 中的这一部分：

className="img-container"

由于您使用的是 className，因此您必须在相关的 css 文件中为其提供一个类，如下所示：

.img-container {
  background-color: #262626;
  width: 474px;
  height: 266px;
}

您以错误的方式选择元素！

推荐阅读