There are various ways of changing the background color of a React component, two of which we’ll explore: importing a CSS file and using inline styles.
Background Color from an External CSS File
Let’s begin with what I consider to be the easiest method: importing a CSS file into the component. I think it’s the easiest because it’s the most familiar method if you’ve developed websites before using HTML and CSS.
If you’ve ever worked with HTML and CSS before, you’ll recognize the following code. It demonstrates how to link an external CSS file to an HTML page:
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
...
</body>
</html>Linking an external CSS file is very different in the React world. That’s because JavaScript ties all of the web pages, or components together rather than simple HTML.
Therefore, we’re required to import an external CSS file into the JavaScript file for that component, like so:
import React from 'react';
import './App.css';
function App() {
return (
<div className="my-component" />
);
}
export default App;
There are a few slight differences in how we name CSS files and how we use classes in React that are demonstrated in the code above:
- It’s a good convention for the CSS file to use the same name as the component (App.css and App.js)
- The div element uses the className keyword, instead of class
CSS is written exactly how you’ve written it before. There are no differences here!
Using Inline Styles
The next approach to changing the background color in React is to write all of the CSS styles inline.
Ironically, this was not a good approach for many years, with developers favoring the external CSS file method for ease of use and readability.
In recent years, there has been a resurgence of writing inline styles, or CSS-in-JS, due to its flexibility and control. CSS-in-JS gives us the power to write conditional styles (which we’ll cover towards the end of this tutorial!)
import React from 'react';
function App() {
return (
<div
style={{
backgroundColor: 'blue',
width: '100px',
height: '100px'
}}
/>
);
}
export default App;Again, there are some slight 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.
Conditional Changing the Background Color in React
This isn’t necessarily a method for changing the background color in a React component as it piggy-backs on inline-styles, but it is incredibly useful to learn.
To illustrate, we’ll use both methods described above:
import React from 'react';
import './App.css';
function App() {
const isBackgroundRed = true;
return (
<div className={isBackgroundRed ? 'background-red' : 'background-blue'} />
);
}
export default App;
JSX allows us to write JavaScript inside of HTML. Therefore, we can write a conditional that passes in the name of a CSS class depending on the value of a variable!
In the example above, we set isBackgroundRed to true. The inline conditional checks whether isBackgroundRed is true. If so, the string ‘background-red’ is returned, if not, ‘background-blue’ is.
As we’re using an external CSS file, we would need to have those two classes defined inside of it for this to work, like so:
.background-red {
background-color: red;
}
.background-blue {
background-color: blue;
}Finally, let’s see how to write an inline conditional using inline styles:
import React from 'react';
function App() {
const isBackgroundRed = true;
return (
<div
style={{
backgroundColor: isBackgroundRed ? 'red' : 'blue',
}}
/>
);
}
export default App;There we have it. An in-depth tutorial on changing the background color! If you enjoyed this tutorial, don’t forget to sign up to the monthly Upmostly newsletter.
I send out plenty of great tutorials like this one every month!
💬 Leave a comment