JAVASCRIPT

update style with javascript react components

import { useState } from 'react';

const App = () => {

  const [ color, setColor ] = useState('#fff');
  const [ backgroundColor, setBackgroundColor ] = useState('#f44');

  return (
    <p style={{ 'color': color, 'backgroundColor': backgroundColor }} >
      Hello world
    </p>
  );
};

export default App;

inline style react

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

inline styling react

//double brackets, quotations around both key and value in css
<span style={{"font-weight": "750"}}>React Inline Styling </span>

use style in react

// use inline style in react
const myFunction = () => {
	return (
     <p style={{ fontSize: 24, margin: '0 auto', textAlign: 'center'}}>
       Hello world
    </p>
    );
}

inline styling in react

render() {
    return (
         <p style={{color: 'red'}}>
            Example Text
        </p>
    );
}

using inline styling in React

function MyComponent(){
2
3return <div style={{ color: 'blue', lineHeight : 10, padding: 20 }}> Inline Styled Component</div>
4
5}

jsx style styling

style={{color: "white",
        backgroundColor: '#f1356d',
        borderRadius: '8px'
       }}

jsx inline style

<div style={{ width: '200px', backgroundColor: 'red' }}>Something</div>

react div style

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

Styling React Using CSS

//Use backgroundColor instead of background-color:
const Header = () => {
  return (
    <>
      <h1 style={{backgroundColor: "lightblue"}}>Hello Style!</h1>
      <p>Add a little style!</p>
    </>
  );
}

inline styling in react

style={ someCondition ? { textAlign:'center', paddingTop: '50%'} : {}}

react style

marginHorizontal
alignContent
alignSelf
aspectRatio
borderBottomWidth
borderEndWidth
borderLeftWidth
borderRightWidth
borderStartWidth
borderTopWidth
borderWidth
bottom
display
end
flex
flexBasis
flexDirection
flexGrow
flexShrink
flexWrap
height
justifyContent
left
margin
marginBottom
marginEnd
alignItems
marginLeft
marginRight
marginStart
marginTop
marginVertical
maxHeight
maxWidth
minHeight
minWidth
overflow
padding
paddingBottom
paddingEnd
paddingHorizontal
paddingLeft
paddingRight
paddingStart
paddingTop
paddingVertical
position
right
start
top
width
zIndex
direction

inline styling react

// Change the background color to red
document.body.style.backgroundColor = "red"; 

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 : {}} />