Styles are essential to any modern web page. They regulate the sizes, shapes, colors, and features of UI elements on-screen. <\/p>\n\n\n\n
While we can add styles in a CSS file (and then reference it in our React code), React gives us the option to add these styles directly into elements using inline styles. <\/p>\n\n\n\n
In this tutorial we’ll go over inline styles with React in JSX, which allow us to code in styles in a higher-level, more intuitive way. <\/p>\n\n\n\n
First, we’ll set up a standard web app using create-react-app<\/em><\/strong>. Then we’ll create a new file, called Element.js<\/span><\/strong>, and reference it in App.js<\/span><\/strong>:<\/p>\n\n\n\n
Now, we’ll clear the boilerplate code in App.js<\/span><\/strong> and add a couple references to the Element <\/em><\/strong>we just created:<\/p>\n\n\n\n
Now, when we run the code, we get the following web page in the browser:<\/p>\n\n\n\n<\/figure>\n\n\n\n
The elements are styled with HTML’s standard settings. We’ll now use inline styles to add a modern look. <\/p>\n\n\n\n
First, we’ll demonstrate how to use inline styles to change color. We’ll set the text color of all elements to red in Element.js<\/strong><\/span>:<\/p>\n\n\n\n
In the above code, we used the “style” attribute in the <div> JSX element to add inline styles. Then, we used a double curly brace before specifying the styles to use, which in this case was just a setting of color to red. <\/p>\n\n\n\n
The double braces are important, as each set of curly braces does something different. The outer set specifies that we are using a variable; since the return portion is written in JSX, our code won’t know that we are setting the attribute to a variable unless we use curly braces around it. <\/p>\n\n\n\n
The inner set of curly braces specifies a JavaScript object. JavaScript objects are mappings between keys and values; in this case, we are mapping the key color to the value “red”. <\/p>\n\n\n\n
Notice also that we applied the inline style to a JSX <div> rather than a JSX React element. The “style” attribute is a special attribute in React which applies only to HTML JSX tags. <\/p>\n\n\n\n
Now, let’s add a fuller set of styles to Element.js<\/span><\/strong>:<\/p>\n\n\n\n
We get the following in our browser:<\/p>\n\n\n\n<\/figure>\n\n\n\n
The code structure is exactly the same, but with more styles within the double curly brace, separated from each other with commas.<\/p>\n\n\n\n
Notice how we put different styles on different lines, adding the newline after the comma. This is a good programming practice, allowing us to see clearly all the styles that are being applied. The alternative is to have a very long set of styles all on one line, which is not very legible. <\/p>\n\n\n\n
What if we wanted to be able to specify different background colors for our elements? Since we can’t use the style attribute directly on our React JSX elements, we have to use a workaround via props. <\/p>\n\n\n\n
First, we’ll add a new “backgroundColor” attribute in each of our elements in App.js<\/span><\/strong>:<\/p>\n\n\n\n
![\"\"](\"http:\/\/upmostly.com\/wp-content\/uploads\/Capture-61.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/upmostly.com\/wp-content\/uploads\/Capture-62.png\")
<\/figure>\n\n\n\n![\"\"](\"http:\/\/upmostly.com\/wp-content\/uploads\/Capture-63.png\")
<\/figure>\n\n\n\n