Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    Assign multiple styles to a component in React 360

    Tomasz ŁakomyTomasz Łakomy
    reactReact
    ^16.3.2

    Sometimes we want to be able to reuse different styles across components and to create generic stylesheets that we can use in various scenarios. In this lesson we're going to learn how to assign multiple styles to a <Text /> component in React 360 building a list of countries that the user would like to visit.

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 0:00 We have a viewer with the list of the countries that we would like to visit. As well over here in the side sheets, we have a couple of objects per country. Inside of those objects, we have a background color with the color taken from the flag of each country. What we would like to do is to apply this color to each of the countries in addition to this many item style.

    0:18 First, destructure all the styles from the styles object. We're going to destructure main view, many item, Poland, Ukraine, UK, Spain, and Italy, as well as Greece. We're going to destructure those from the styles object. Let me save that. Now we're going to remove all of those styles, save, refresh. Obviously, it works. There we go. It said OK. Let me format that.

    0:39 Now, in order to provide multiple styles for those text components, what we need to do is to provide an array of styles to the style property. I'm going to wrap all of those inside of an array. We're going to do Poland, Ukraine, UK, Spain, Italy, and Greece. Then save and refresh that.

    0:56 Right now, we have the desired effect. Each text element has a background color of the flag of its country. Suppose I would like to have a red text style. I'm going to create a red text object, set the color to red.

    1:08 We would like to apply this color to Italy. I can just add a red text over here and destructure it from styles as well. After I save and refresh that, Italy is going to get additional style. It's going to have a green background and a red text inside of it.