'Adding styling to rails react component wrapping div

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?

ruby-on-rails-4reactjsreact-rails


Solution 1:[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"}) %>

Solution 2:[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)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Daniel May
Solution 2 duhaime

Related Questions