提问人：Eve Nordinstorm 提问时间：11/17/2023 更新时间：11/17/2023 访问量：37
如何在 React 中将此按钮移动到我创建的卡片上？
How can I move this button in React to be on the card I've created?
问：
我创建了一个 Button 组件，它有一个 JS 文件和一个运行良好的 CSS 文件（样式各不相同）。我在此广告卡中添加了按钮的实例，但我无法让它向上移动，但我认为这不是方法，我认为它没有在与广告卡相关的 CSS 文件中获取按钮。是否可以使用两个不同的 CSS 文件来设置此按钮的样式，因为我不想显然移动按钮的所有实例，而只想移动广告卡中的一个实例。
下面是一个屏幕截图，突出显示了卡片中应该包含的内容以及按钮应该移动到的位置（显然会隐藏溢出，这是为了向您展示按钮）。广告卡
这是相关的代码项，但如果需要，可以提供更多上下文，但似乎没有必要，因为其他一切都有效。（需要明确的是，按钮本身可以工作并且按照 Button.css 正确设置样式，但我似乎无法更改它在另一个 CSS 中的位置）。
广告项目.js<Button buttonStyle="btn--blue">Add Now</Button>
假期.css.Button { position: absolute; bottom: 500%; }
我尝试在CSS中引用为.Button，.btn--蓝色，并向 Button 添加一个 ClassName 并引用它，但没有任何效果。
答：
0赞
hokwanhung
11/17/2023
#1
我认为不可能使用类选择器设置组件的样式，您仍然需要添加一个类来正确适应.它应该是这样的（带有）：React<Button>cssJSX
<Button className="button" buttonStyle="btn--blue">Add Now</Button>
那么，如果您尝试过这个但没有任何效果怎么办？然后，是时候检查以下多项内容了：
确认您已经导入了两个样式表，最好是第一个样式表之后。
holiday.css<link rel="stylesheet" href="path/to/holiday.css" />
检查是否已通过浏览器的工具应用。如果出现以下情况，则规则将被覆盖：
stylesInspectCSS
并且您只需将鼠标悬停在两个块上即可检查两个块之间的 CSS 特异性：
CSS
比较特异性，看看是什么覆盖了规则（因为除非您同时提供两个文件，否则我无法做到这一点）。
css
有时，如果组件没有定位，意志根本不起作用。
offsetParentButtonposition: absolute
设置 to 以确保它位于 （其他人已经在这个问题中很好地解释了这个问题：绝对位置不起作用）。
offsetParentposition: relativeDOM
希望以上答案有所帮助。
评论
0赞
Eve Nordinstorm
11/22/2023
感谢您的宝贵建议，但是，这些观点都不起作用。Holiday.css 被导入到假期 JS 文件中，并且此引用的所有其他内容都已设置样式，因此它必须与按钮有关。我已经检查了样式，没有任何相关内容被覆盖。我已经尝试了这个位置：在 .btn 和 .btn 中相对——它继承自蓝色
0赞
hokwanhung
11/25/2023
@EveNordinstorm 您好，感谢您的回复。我建议检查你的CSS，以及你把它们放在哪里;如果可能，请尝试使用 and 代替 ;但是，如果您想知道为什么会出现问题，您可以将您的代码发布到网站上 - 如果它适合您的需要，您甚至可以复制并粘贴它，以便查看它。希望你的项目一切顺利。displayflexgridposition: absoluteposition: absolute
评论