Question 223383 in Html Question posted in
Some basic documentation can be found here.

Html – How to apply CSS to a dynamically created div from a React library?

I’m running into a CSS issue that I’m able to fix via devtools by finding the right div and applying styling directly, but I’m unable to do the same in code. The reason for this is that I use the <SplitPane> React component, which generates it’s own divs in the DOM. For example, if my React code looked like this:

<SplitPane />

The generated DOM would look something like this

<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>

The library itself has some info on applying CSS to the overall SplitPane (which doesn’t fix my issue), but not the individual divs. I need to apply styling to the div labeled sc-gueYoa fyVXeP, but I’m not sure how to target that if these are all auto-generated class names. What’s the best way to apply CSS to this div and this div alone?

Tags:

2

Answers


  1. 0

    Assuming I found the right docs, you would use pane1Style and pane2Style.

    If that isn’t quite what you are looking for, you could also do a different css approach, which would look something like this:

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

    Docs I found.

    Login or Signup to reply.
  2. 0

    Assuming you can add a class name in the parent component (for eg: parent in code below) and you are using scss/sass you can do the following.

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

.parent {
div > div:nth-child(2) {
  /* Add your custom styles here */
  /* For example: */
  background-color: red;
  color: white;
}
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search