{"id":1657,"date":"2019-07-25T09:30:00","date_gmt":"2019-07-25T09:30:00","guid":{"rendered":"http:\/\/upmostlymulti.onpressidium.com\/?p=1657"},"modified":"2021-10-28T11:03:19","modified_gmt":"2021-10-28T16:03:19","slug":"changing-the-background-color-in-react","status":"publish","type":"post","link":"http:\/\/upmostly.com\/tutorials\/changing-the-background-color-in-react","title":{"rendered":"Changing the Background Color in React"},"content":{"rendered":"\n
\"A<\/figure>\n\n\n\n

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.<\/p>\n\n\n\n

Background Color from an External CSS File<\/h2>\n\n\n\n

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.<\/p>\n\n\n\n

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:<\/p>\n\n\n\n

Linking an External CSS File in HTML<\/div>
<!DOCTYPE html><\/span>\n<<\/span>html<\/span> lang<\/span>=<\/span>\"<\/span>en-US\"<\/span><\/span>><\/span><\/span>\n <<\/span>head<\/span>><\/span><\/span>\n <<\/span>meta<\/span> charset<\/span>=<\/span>\"<\/span>UTF-8\"<\/span><\/span>><\/span><\/span>\n <<\/span>title<\/span>><\/span><\/span>Test<\/<\/span>title<\/span>><\/span><\/span>\n <<\/span>link<\/span> rel<\/span>=<\/span>\"<\/span>stylesheet\"<\/span><\/span> type<\/span>=<\/span>\"<\/span>text\/css\"<\/span><\/span> href<\/span>=<\/span>\"<\/span>styles.css\"<\/span><\/span> \/><\/span><\/span>\n <\/<\/span>head<\/span>><\/span><\/span>\n <<\/span>body<\/span>><\/span><\/span>\n  ...\n <\/<\/span>body<\/span>><\/span><\/span>\n<\/<\/span>html<\/span>><\/span><\/span><\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
Linking an external CSS file is very different in the React world. That’s because JavaScript ties all of the web pages<\/em>, or components together rather than simple HTML.<\/p>\n\n\n\n
Therefore, we’re required to import<\/em><\/strong> an external CSS file into the JavaScript file for that component, like so:<\/p>\n\n\n\n
Importing an External CSS File in React<\/div>
import<\/span> React from<\/span> 'react'<\/span>;<\/span>\nimport<\/span> '.\/App.css'<\/span>;<\/span>\n\nfunction<\/span> App<\/span>(<\/span>)<\/span> {<\/span>\n  return<\/span> (<\/span>\n    <<\/span>div<\/span> className<\/span>=<\/span>\"<\/span>my-component\"<\/span><\/span> \/><\/span><\/span>\n  )<\/span>;<\/span>\n}<\/span>\n\nexport<\/span> default<\/span> App;<\/span>\n<\/div><\/code><\/pre><\/div><\/div><\/div>\n\n\n\n
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:<\/p>\n\n\n\n