What is the correct way to use inline style in react?

Question

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?

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 component (like <Logo/>). If you try passing styles directly to a component, the object passed will live in that component's props (and be accessible in that component via props.style) but the styles contained therein won't be applied.

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