如何将CSS应用到React库中动态创建的div？

Question

我遇到了 CSS 问题，我可以通过开发工具找到正确的 div 并直接应用样式来修复该问题，但我无法在代码中执行相同的操作。原因是我使用了

<SplitPane>

React 组件，它在 DOM 中生成自己的 div。例如，如果我的 React 代码如下所示：

<SplitPane />

生成的 DOM 看起来像这样

<div class="sc-iAEyYk dohjMh SplitPane vertical">
  <div class="sc-beqWaB fbooqV Pane vertical">
    <div class="sc-dmqHEX llsejy"></div>
    <div class="sc-gueYoa fyVXeP"></div>
  </div>
</div>

库本身有一些关于将CSS应用于整个SplitPane的信息（这并不能解决我的问题），但不是单个div。我需要将样式应用于标记为

sc-gueYoa fyVXeP

的 div，但如果这些都是自动生成的类名，我不确定如何定位该样式。将 CSS 应用于此 div 以及单独此 div 的最佳方法是什么？

Answer 1

假设我找到了正确的文档，您将使用pane1Style和pane2Style。

如果这不完全是您想要的，您还可以采用不同的 css 方法，如下所示：

.Splitpane :nth-child(0) {
    color: green;
}

我找到的文档。