"react div style" Code Answer's

dangerouslySetInnerHTML

By Salo Hopeless on Jun 15, 2020

function createMarkup() {
    return {
       __html: 'First · Second'    };
 }; 

<div dangerouslySetInnerHTML={createMarkup()} /> 

Source: stackoverflow.com

Add Comment

inline style jsx

By Puzzled Puffin on Sep 09, 2020

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

Add Comment

inline style react

By Kaotik on Mar 14, 2020

// You are actuallty better off using style props
// But you can do it, you have to double brace
// and camel-case the css properties
render() {
	return (
    	<div style={{paddingTop: '2em'}}>
      		<p>Eh up, me duck!</p>
      	</div>
    )
}

Add Comment

react div style

By Nervous Newt on May 21, 2021

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

Source: stackoverflow.com

Add Comment

jsx inline css styling

By Uninterested Unicorn on Mar 26, 2021

// Best option (in my opinion) is to make a style object, similar to a CSS class
// This is especially useful when you want to use the style across multiple elements
// Another plus is being able to make a lot of these styles in a util file, and import as needed
// Keep in mind the CSS props need to be camel-cased

const box = {
  textAlign: 'center',
  borderStyle: 'double'
};
const text = {
  color: '#ff0000',
  backgroundColor: '#888888'
};

renderBox() {
  	return (
    	<div style={box}> <p style={text}>
      		This is just a box, no need to worry.
        </p> </div>
  	);
}

// The reason I prefer the above is readability and not as much duplication.
// Alternatively, you can hard-code the styling.
// Just remember, you're passing an object as the style prop.
// So, first curlies are to say "hey, this is JS, not html"
// Second curlies are to say "hey, this is an object"

renderBox() {
	return (
    	<div style={{textAlign:'center', borderStyle:'double'}}>
      		<p style={{color:'#ff0000', backgroundColor:'#888888'}}>
              	This is just a box, no need to worry.
            </p>
		</div>
	);
}

Add Comment

inline style react

By Clean Cheetah on Jul 05, 2020

// 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

Add Comment