Changing the Background Color in React

PHOTO EMBED

Tue Jun 29 2021 11:33:36 GMT+0000 (UTC)

Saved by @hisam #react.js #css

//Using Inline Styles
import React from 'react';

function App() {
  return (
    <div
      style={{
        backgroundColor: 'blue',
        width: '100px',
        height: '100px'
      }}
    />
  );
}

export default App;

//Conditional Changing the Background Color in React
import React from 'react';

function App() {
  const isBackgroundRed = true;

  return (
    <div
      style={{
        backgroundColor: isBackgroundRed ? 'red' : 'blue',
      }}
    />
  );
}

export default App;

//OR

//App.js
import React from 'react';
import './App.css';

function App() {
  const isBackgroundRed = true;
  
  return (
    <div className={isBackgroundRed ? 'background-red' : 'background-blue'} />
  );
}

export default App;
//App.css
.background-red {
  background-color: red;
}

.background-blue {
  background-color: blue;
}
content_copyCOPY

differences when writing inline CSS inside of a React component: We use camelCase writing style for CSS properties rather than hyphens between words (or ūüć°kebab-case as it‚Äôs now known) For example: background-color becomes backgroundColor Each property is passed into an object inside of a prop called style. Convention states that each property should be on a new line, for readability purposes.