0

I am trying to style an HTML element inside the component from the Fluent UI React library.

enter image description here

What I want to do is put the "On" / "Off" text to the left of the toggle rather than on the left. When I look at my "compiled" code I can see that the component is translated into:

<div>
  <label></label>
  <div id="target-me">
    <button>
      <span></span>
    </button>
    <label></label>
  </div>
</div>

I want to add an inline-flex to the target-me div and set flex-flow property to row-reverse in order to get the button element to the right of the label element. The problem is, I can't manage to target the "target-me" div in my code.

How can I achieve this without rewriting a custom component ?

Thanks!

CodingAnxiety
  • 206
  • 2
  • 13

1 Answers1

1

Ok, well I found the answer to my own question so here it is: 

<Toggle styles={{ container: { flexFlow: "row-reverse" } }} />

Essentially you can target different parts of the component (root, container, label..) by using the styles property. Use VS Code's Intellisense to find out what elements you can target inside the component and then just give it some regular CSS-in-JS that you want.

CodingAnxiety
  • 206
  • 2
  • 13