mergeStyles can't child (by id) of parent (by class)

Question

For something like the following:

<div class="example">
  <div id="label">
    Label text
  </div>
</div>

The following CSS is able to style 'Label text'

.example #label {
  color: red;
}

But it does not work with fluentUI mergeStyles:

const RedLabelStyles = mergeStyles({
  ".example #label": {
    color: "red"
  }
});

I know it's a problem with the selector, not the CSS itself, because the following correctly applies styles:

const RedLabelStyles = mergeStyles({
  "#label": {
    color: "red"
  }
});

score 0 · Answer 1 · answered Nov 03 '21 at 20:15

Was due to the RedLabelStyles selector being applied to the <div class="example"> itself. It works as expected if the JSX is as follows:

<div class={RedLabelStyles}>
  <div class="example">
    <div id="label">
      Label text
    </div>
  </div>
</div>

1 Answers1