使用 React 访问所有其他组件答案

【问题标题】：Accessing every other component with React使用 React 访问所有其他组件
【发布时间】：2020-06-06 19:53:35
【问题描述】：

我正在尝试设置项目中所有其他组件的背景。我已经尝试了多种方法来做到这一点，就像是纯 HTML 和 CSS 一样。

（注意：'card-container'是组件内部的div的类名）

反应 (.jsx) 代码：

<div className="cards">
    <Card />
    <Card />
    <Card />
    <Card />
</div>

CSS 代码：

.cards .card-container:nth-child(odd) {
    background-color: red;
}

无论我尝试使每个元素的背景变为红色，或者只是第一个实例。

非常感谢任何提示，谢谢。

编辑：

呈现的 HTML 如下：

<div id="root">
    <div style="margin: 10px;">
        <div class="cards">
            <div class="card-container">...</div>
            <div class="card-container">...</div>
            <div class="card-container">...</div>
            <div class="card-container">...</div>
        </div>
    </div>
</div>

【问题讨论】：

可以添加渲染的 HTML 吗？
@ArnoTenkink 添加了渲染的 HTML
我无法重现：codesandbox.io/s/brave-mccarthy-1gonv?file=/src/App.js
这太有趣了。我们有相同的代码，但只有我的第一个 Card 组件获得了红色背景...

标签： css reactjs

【解决方案1】：

这似乎应该可以工作。

检查是否有其他内容实际上没有覆盖 css (!important)。
打开开发者工具并实时检查/修改样式。
验证选择器/子卡的类等

【讨论】：

【解决方案2】：

您可以让卡片组件将类名作为道具，并在每个其他元素中传递一个类来做到这一点。

className={`root `,${props.className}}

【讨论】：