//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; }
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter