Consider the code snippet below:
<div class="example">
<div id="label">
Label text
</div>
</div>
The CSS provided can style 'Label text' successfully:
.example #label {
color: red;
}
However, when using fluentUI mergeStyles, the styling does not apply as expected:
const RedLabelStyles = mergeStyles({
".example #label": {
color: "red"
}
});
The issue lies in the selector, not the CSS itself. The correct application of styles is demonstrated below:
const RedLabelStyles = mergeStyles({
"#label": {
color: "red"
}
});