Is possible to modify Header css color dinamically?

[GMH501]

I want to know if is possible to change dinamically (using props) the color of the header ([data-rsbs-header] and [data-rsbs-header]:before )

In the following example i have modified the css properties, but i want to do this from React, so i can use the same component with different aspect based on events.

[data-rsbs-header] {
  text-align: center;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  box-shadow: 0 1px 0
    rgba(46, 59, 66, calc(var(--rsbs-content-opacity,1) * 0.125));
  z-index: 1;
  padding-top: calc(20px + env(safe-area-inset-top));
  padding-bottom: 8px;
  background-color: black;   /* CUSTOM */
  border-top-left-radius: 12px;   /* CUSTOM */
  border-top-right-radius: 12px;   /* CUSTOM */
}

[data-rsbs-header]:before {
  position: absolute;
  content: '';
  display: block;
  width: 36px;
  height: 4px;
  top: calc(8px + env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%);
  border-radius: 2px;
  /* background-color: var(--rsbs-handle-bg,hsla(0, 0%, 0%, 0.14)); */
  background-color: #eceff1; /* CUSTOM */``

Your component is awesome.

Thank you, Gabriel

[ajaypillay]

Hi, you can actually do this using document.querySelector.

document.querySelector("[data-rsbs-overlay]").style.background = `"${yourColorHere}"`

And for the :before pseudo element, it seems that it's not possible to directly modify its styles with JavaScript, but you can get around this with CSS variables. See this SO post for more information.

You can get the CSS property with window.getComputedStyle as such:

window.getComputedStyle(document.querySelector("[data-rsbs-overlay]"), ":before").getPropertyValue("background-color")

But you can't set it, even if you use the setProperty function.

I would advise going with the CSS variable route, that seems to work nicely, albeit being a little roundabout, or you could look at the other ways as described in that SO post, but they're all a little hacky due to there not being any organic way of modifying pseudo elements' styles.

[bhupendra1011]

Hi @stipsan , the above solution works but there is a flash of unstyled content as the bottom sheet is initially styled using values defined in its CSS file until I change the background-color of the bottom sheet through js, is there any way to avoid it?

Many Thanks.