Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 907
Daniel May Avatar asked Jun 26 '15 02:06

Daniel May


People also ask

Can you add style to React component?

Sharing styles across many React components The style objects and the components do not have to be in the same file. We can create a separate . js file for our styles, export these styles, and then import them into the component where we want to use them.

How do you wrap elements in React?

To create wrapper components, you'll first learn to use the rest and spread operators to collect unused props to pass down to nested components. Then you'll create a component that uses the built-in children component to wrap nested components in JSX as if they were HTML elements.

How do you avoid Div soup in React JS?

The <div> Soup Actually there is a solution. You might have already guessed it, it is to wrap a <div> around all the elements in the return statement, this technically make the return statement to return only one value as a whole.


1 Answers

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"}) %>
like image 88
Daniel May Avatar answered Nov 08 '22 13:11

Daniel May