I am new to react and I was trying to figure out the correct way to use inline style in react

for Example this is something I am doing

import React from 'react';
import Classes from './toolbar.css';
import Logo from '../../logo/logo.js';
import Navitems from '../navigation-items/navigation-items.js';

const toolbar = (props) => {
  return (
    <header className={Classes.Toolbar}>
    <div> Menu </div>
    <Logo style={{height: "70%"}}/>
    <nav className={Classes.DesktopOnly}>
    <Navitems />
    </nav>
    </header>
  )

}

export default toolbar;

Here this doesn't seem to be working

 <Logo style={{height: "70%"}}/>

Any Guesses what would I be doing wrong?

Also, Logo have its own external CSS but I guess inline-Css should dominate over the external css?

I am new to react and I was trying to figure out the correct way to use inline style in react

for Example this is something I am doing

import React from 'react';
import Classes from './toolbar.css';
import Logo from '../../logo/logo.js';
import Navitems from '../navigation-items/navigation-items.js';

const toolbar = (props) => {
  return (
    <header className={Classes.Toolbar}>
    <div> Menu </div>
    <Logo style={{height: "70%"}}/>
    <nav className={Classes.DesktopOnly}>
    <Navitems />
    </nav>
    </header>
  )

}

export default toolbar;

Here this doesn't seem to be working

 <Logo style={{height: "70%"}}/>

Any Guesses what would I be doing wrong?

Also, Logo have its own external CSS but I guess inline-Css should dominate over the external css?

• javascript
• css
• reactjs

• 7 If Logo, which you don't show us, doesn't assign ...props or the style prop, then it won't be put on the element – Andy Ray Commented Jun 13, 2018 at 1:20
• 2 It's not really inline CSS if it's on a ponent. Despite looking like an HTML element, <Logo /> is actually a React ponent imported from a JS file, and therefore the inline styling doesn't work the same. Instead it sees 'style' as a prop that you can access from Logo.js within which console.log(this.props.style) will log {height: "70%"} – JSONaLeo Commented Jun 13, 2018 at 1:50

1 Answer 1

This is an example of inline styling* from the React Docs:

const divStyle = {
  color: 'blue',
  backgroundImage: 'url(' + imgUrl + ')',
};

function HelloWorldComponent() {
  return <div style={divStyle}>Hello World!</div>;
}

If you want the object containing the style rules to live in the style attribute itself, the docs provide an example of that too.

// Result style: '10%'
<div style={{ height: '10%' }}>
  Hello World!
</div>

Note that in both examples, style is an attribute of a JSX tag, not of a user-defined ponent (like <Logo/>). If you try passing styles directly to a ponent, the object passed will live in that ponent's props (and be accessible in that ponent via props.style) but the styles contained therein won't be applied.

*Inline insofar as the style rules are embedded in the ponent's JSX file as opposed to an external stylesheet