Assign multiple styles to a component in React 360
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.
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.
Member comments are a way for members to communicate, interact, and ask questions about a lesson.
The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io
Be on-Topic
Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.
Avoid meta-discussion
Code Problems?
Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context
Details and Context
Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!