Adding inline styles to react

Question

Currently I'm using react.js and I'm trying to get two div's to be side by side. Currently I'm trying to

<div id="sidebar" style = "display:inline-block;" >
  <script src="build/sidebar.js"></script>
</div>
<div id="map-canvas" style="display: inline-block; width: 20%; height: 50%; "></div>

with sidebar.js as the where react is stored. This unfortunately doesnt work however as it just moves map-canvas to the side while sidebar isn't to the left of it; its on top. I've tried many various combinations w/ float as well and none of them seem to work

Another option is to edit the sidebar.js code where I currently have

return <div>
  <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" />
  <ul>
    { libraries.map(function(l){
      return <li>{l.name} </li>
    }) }
  </ul>
</div>;

in which I try doing return <div style ="display: inline-block;"> However, in this case the generated html doesnt show up at all. I'm perplex to what I should try but react seems like it doesnt want to play nice with other div elements.

Michael Parker · Accepted Answer · 2015-08-14 18:09:12Z

29

That's because in React, the style prop takes an object instead of a semicolon-separated string.

<div id="sidebar" style={{display : 'inline-block'}} >
  <script src="build/sidebar.js"></script>
</div>
<div id="map-canvas" style={{display: 'inline-block', width: '20%', height: '50%'}}>
</div>

Edit:

So this:

return <div style="display: inline-block;">

Would become this:

return <div style={{display: 'inline-block'}}>

edited Aug 14, 2015 at 18:09

answered Aug 12, 2015 at 18:32

Michael Parker

13k7 gold badges42 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Benjamin Chu Over a year ago

Sorry I didnt make this clear, the first block of code is in the html document while the 2nd block of code is the actual JSX not the converted javascript. Is the inline style for JSX the same as with an object instead of semicolon separated string?

Michael Parker Over a year ago

I edited my answer to hopefully make it a bit more clear. If I understand correctly, that is the line you were trying to add an inline style on.

FullStack Over a year ago

@MichaelParker - works well for me saturnapi.com/fullstack/inline-css-styles-hover

fgseneres · Accepted Answer · 2017-08-30 15:48:55Z

2

const styles = {
  container: {
   backgroundColor: '#ff9900',
   ...
   ...
   textAlign: 'center'
  }
}

export default class App extends React.Component {
  render() {
    return(
      <div className="container" style={styles.container}>
      // your other codes here...
      </div>
    );
  }
}

answered Aug 30, 2017 at 15:48

fgseneres

211 bronze badge

1 Comment

juanferrer Over a year ago

It's usually a good practice to explain what the code does and how it answers the question, so that other users can also benefit from it.

Collectives™ on Stack Overflow

Adding inline styles to react

2 Answers 2

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related