JAVASCRIPT

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'
       }}

css react

import "./FileName.css"; // import your css file

// or css inside your react file
//for example:
const MyDiv = React.createClass({
  render: function() {
    const style = {
      color: 'white',
      fontSize: 200
    };
    
    return <div style={style}> Have a good and productive day! </div>;
  }
});

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