Adding styling to rails react component wrapping div

Question

I'm using react_component in my Rails project. This inserts a wrapping div for the react.js component, e.g.

<div data-react-class="ButtonSwitchToTab" data-react-props="{...}">
  <a href="#" class="btn btn-primary btn-lg" ... data-reactid=".2">
    Add / Invite People
  </a>
</div>

What I really need is to insert style information into this wrapping div so that components align appropriately, like so:

<div data-react-class="ButtonSwitchToTab" data-react-props="{...}"
 style="display:inline-block">  <<<<<------
  <a href="#" class="btn btn-primary btn-lg" ... data-reactid=".2">
    Add / Invite People
  </a>
</div>

What's the appropriate way to do that?

Campinas

Answer 1

Ah, dove deeper into react_rails doco (Helper's signature) and found that I could add pass-through html_options.

So:

<%= react_component('ButtonSwitchToTab', {prop: .., prop: ..}, 
                    {:style => "display:inline-block"}) %>

Campinas

Answer 2

I needed to style the component mount point as well, and I just assigned a custom ID to my component:

= react_component 'LoginPage', id: 'login-page-container'

(HAML template)

Kook