This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Intro to inline styles in React components

5:32 React lesson by

React lets you use "inline styles" to style your components; inline styles in React are just JavaScript objects that you can render in an element's style attribute. The properties of these style objects are just like the CSS property, but they are camel case (borderRadius) instead of kebab-case (border-radius). React inline styles allow you to use all the JavaScript you know and love like variables, loops, ES6 modules etc. with your styles. React then renders these properties as inline styles in the output HTML, which means that styles are scoped to the component itself - no more cascading issues or trying to figure out how to re-use a component...everything that belongs to a component is self contained with the component!

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

React lets you use "inline styles" to style your components; inline styles in React are just JavaScript objects that you can render in an element's style attribute. The properties of these style objects are just like the CSS property, but they are camel case (borderRadius) instead of kebab-case (border-radius). React inline styles allow you to use all the JavaScript you know and love like variables, loops, ES6 modules etc. with your styles. React then renders these properties as inline styles in the output HTML, which means that styles are scoped to the component itself - no more cascading issues or trying to figure out how to re-use a component...everything that belongs to a component is self contained with the component!

Here, we have a simple "hello world" component that sets up a class and has a render method that renders a prop. We validate the propType here, and then we export that component and use it inside of our main.js file. We import the example, and then we render that example. You can see over here we have "hello world" being rendered.

Let's add some styles to our component to make it render as an announcement on the web page. Going back to our example.js file, we could create some styles in an external style sheet and add a class name. Let's call it 'announcement'. This is a traditional way of adding styles to your HTML.

One thing that React allows, it's really neat, is you can have inline styles that are defined as JavaScript objects. For example, let's remove this class name, and let's create a new JavaScript object called 'styles'. Inside of that, we're going to have properties that correspond with the CSS property names, only that they'll be camel cased instead of kebab case.

Instead of "border-radius" like this, we'll have "borderRadius" camel case. The values are in strings, so let's set the border radius to one rem. Then, let's have a border. Let's do one pixel, solid. That will be a nice orange color. Then, let's add some padding. We'll add 0.5 rem. Let's change the font family to be sans serif.

We'll update the font size to be 1.3 rem. Finally, let's text align center. Now that we have this "style" JavaScript object built up, we can render it to an element by adding this style attribute and then rendering our object. I'm going to save this, and we can see our announcement styles.

The reason why this is so powerful is because it's just vanilla JavaScript, so anything you can do in JavaScript you can now do with your styles. For example, let's say we want to make our styles more reusable. We want to create some variables. Let's pull this "borderRadius" value out, and I'm going to create a new variable that we'll call "baseRadius".

Here, I'll define "baseRadius", and we'll set it equal to that value that we had. Now, we can update our radius in one place, so we can change this to 0.5. We want it to be a smaller border radius. The component has been re-rendered with the new variable.

Let's also pull out our color into variable. We'll say "const primaryColor", and we'll set this equal to let's try a new blue color here. Now, we can change this to an ES6 template string, and we can render this value out. Instead of a hardcoded value, we can use our "primaryColor" variable that we set up. We can see that our variable has been applied.

We can also organize our code however we want, because it's just a JavaScript object. If we want to create an announcement object inside of our styles object, we can do that. Then, take all of our properties that we built and move them up into that object. Now, when we render it, we'll call "styles.announcement()".

To make sure that's working, let me bump up the pixel value on our border. We can see that it is still working. With React inline styles, we can also use ES6 modules. Let's take all of this code and let's place it in a new file. Going to go inside of our example component. Let's create a new file called "styles.js". We'll paste what we had before here.

Now, let's export the styles object that we created as the default export. Then, we'll save that and jump back over to our example.js file. We'll "import styles from 'styles';". Now, let's make sure this is still working. Let's jump back to our styles module. I'm going to add a background color that will be equal to our "primaryColor" variable. Let's also change the text color to be white.

We can see that the module is now working, being imported into our example component. Basically, React inline styles are really cool because you can use any JavaScript you want in your styles.

Another thing that's really neat about React inline styles is that if we take a look at our elements in our developer tools, we can see that they do render as inline styles. This is cool because it means that all of your styles are self-contained within the component, and you don't have to deal with any cascading problems between other styles.

Everything is scoped to the component itself and self-contained, so your components become truly shareable.

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?