Css in reactjs

Inline style jsx

//Multiple inline styles
<div style={{padding:'0px 10px', position: 'fixed'}}>Content</div>

Css in reactjs

Assuming you have 2 separate files: Example.css and Example.js

Use the '.' to reference a className that you'll use later 

.primary{
	color: red;
}

<h1 className="primary"> Hello, World </h1>

In this case "primary" in the className is referencing .primary in the CSS file

Inline style react

// Typical component with state-classes
<ul className="todo-list">
  {this.state.items.map((item,i)=>({
<li 
 className={classnames({ 'todo-list__item': true, 'is-complete': item.complete })}>
            {item.name}
</li>
 })}
</ul>

// Using inline-styles for state
<li className='todo-list__item'
 style={(item.complete) ? styles.complete : {}} />

Source: stackoverflow.com

Similar codes

12 votes313 views5 answers
Jquery-3.5.1.min.js download
Html
25 votes292 views1 answer
Html add page to document
Html
1 vote313 views1 answer
Html text transformation
Html
0 vote325 views1 answer
Change the height of select option
Html
0 vote315 views1 answer
Form with checkbox
Html
109 votes284 views6 answers
Html how to add an image
Html
225 votes368 views5 answers
Add space in html
Html
13 votes305 views1 answer
How do i put my h1 tag in the middle of the screen
Html
0 vote304 views1 answer
Fix stuff
Html
0 vote263 views1 answer
Li text html
Html