如何在 React 中将此按钮移动到我创建的卡片上？

Question

我创建了一个 Button 组件，其中有一个 JS 文件和一个 CSS 文件，该文件运行良好（具有不同的样式）。我已经在此广告卡中添加了按钮的实例，但我无法让它向上移动，但我不认为这是方法，我认为它没有在与广告卡相关的 CSS 文件中获取按钮。是否可以使用两个不同的 CSS 文件来设置此按钮的样式，因为我显然不想移动该按钮的所有实例，只移动广告卡中的一个。

下面是一个屏幕截图，突出显示了卡片中应包含的内容以及按钮应移动到的位置（显然会隐藏溢出，这是为了向您显示按钮）。

这是相关的代码项，但如果需要，可以提供更多上下文，但似乎没有必要，因为其他一切都有效。 （需要明确的是，按钮本身可以工作，并且样式按照 Button.css 正确设置，但我似乎无法更改它在另一个 CSS 中的位置）。

AdvertItem.js

<Button buttonStyle="btn--blue">Add Now</Button>

假期.css

.Button { position: absolute; bottom: 500%; }

我尝试在 CSS 中引用 .Button、.btn--blue 并将 ClassName 添加到 Button 并引用它，但没有任何效果。

Answer 1

我认为不可能使用类选择器来设置

React

组件的样式，您仍然需要为

<Button>

添加一个类以正确适应

css

。应该是这样的（带有

JSX

）：

<Button className="button" buttonStyle="btn--blue">Add Now</Button>

---

如果您已经尝试过但没有效果怎么办？然后，是时候检查以下多项内容了：

1. 确认您已导入两个样式表，最好是第一个样式表之后的

   holiday.css

   。

   <link rel="stylesheet" href="path/to/holiday.css" />
   

2. 检查

   styles

   是否已通过浏览器的

   Inspect

   工具应用。如果出现以下情况，则

   CSS

   规则将被覆盖：

   

   您只需将鼠标悬停在两个 CSS 块上即可检查其之间的

   CSS 特异性

   ：

   

   比较特异性并查看哪些内容覆盖了规则（因为除非您提供两个

   css

   文件，否则我无法执行此操作）。

3. 有时，如果

   offsetParent

   组件的

   Button

   未定位，则

   position: absolute

   将根本不起作用。将

   offsetParent

   设置为

   position: relative

   以确保其位于

   DOM

   上（查看此 stackoverflow 问题以获取更多信息：绝对位置不起作用）。

希望以上回答对您有帮助。