In we saw how to move from sass to a Styled Component for a simple component. So this tutorial assume that you have already installed the styled component made your first try with it. Now we are going to increase the complexity of our controls in the chat app moving to styled components the messages in the chat window. Part I The data Each chat window has an array of messages where each one has the name of the sender, the time and the message like { : time: message: } from 'rob' '13:23pm' 'hi' After that when the message is sent the array is updated and the component Messages is rendered. The Controls messages.js React ; ; Messages = ({ messages, }) => messages.map( <div className= key={index}> <div className='sender-time'>{data.time}</div> <div className='sender-name'>{data.from +":"}</div> <div className='sender-message'>{data.message}</div> < import from 'react' import './messages.scss' const from ( ) => data, index 'message-row' < = === ' ' ' ')}> div className {(from data.from? sender : receiver </ > div /div> ) export default Messages messages.scss .message-row{ : %; float:left; .sender-name{ :# ea8; word- : initial; width: %; margin-right: px; font: px/ px , , ,Arial,Helvetica,Verdana,sans-serif; } .sender-message{ : %; margin-left: px; float:left; font: px/ px , , ,Arial,Helvetica,Verdana,sans-serif; } .sender-time{ : right; font: px/ px , , ,Arial,Helvetica,Verdana,sans-serif; color: grey; } } .receiver{ :left; padding: px px px px; margin-left: px; margin-top: px; position: relative; background: #FFFFFF; border-radius: em; max-width: px; word- : -all; } .receiver:after { : ; position: absolute; left: ; top: %; width: ; height: ; border: px solid transparent; border-right-color: #FFFFFF; border-left: ; border-bottom: ; margin-top: px; margin-left: px; } .sender{ : px px px px; margin-right: px; margin-top: px; float:right; position: relative; background: #a4e893; border-radius: em; max-width: px; word- : -all; } .sender:after { : ; position: absolute; right: ; top: %; width: ; height: ; border: px solid transparent; border-left-color: #a4e893; border-right: ; border-bottom: ; margin-top: px; margin-right: px; } width 100 color 4e7 break 100 50 18 20 'Open Sans' "Lucida Grande" "Lucida Sans Unicode" width 100 10 12 18 'Open Sans' "Lucida Grande" "Lucida Sans Unicode" float 11 20 'Open Sans' "Lucida Grande" "Lucida Sans Unicode" float 5 10 5 10 30 10 .4 450 break break content '' 0 50 0 0 20 0 0 -10 -20 padding 5 10 5 10 30 10 .4 450 break break content '' 0 50 0 0 20 0 0 -10 -20 So as we did it in the Part I, we're going to create styled components, in this case that we have nested divs a good approach is go from bottom to top changing small components first. First add the Styled components library. styled import from 'styled-components' As we see in the messages.js we have three divs: sender name, sender time, and sender message. So we're going to create four styled.div components with the styles. MessageRow = styled.div SenderName = styled.div SenderMessage = styled.div SenderTime = styled.div const ` width:100%; float:left; }` const ` color:#4e7ea8; word-break: initial; width:100%; margin-right:50px; font:18px/20px 'Open Sans',"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Verdana,sans-serif;` const ` width:100%; margin-left:10px; float:left; font:12px/18px 'Open Sans',"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Verdana,sans-serif; ` const ` float: right; font: 11px/20px 'Open Sans',"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Verdana,sans-serif; color: grey; ` Then we can change our code in order to use them and the message render looks like this messages.map( <MessageRow key={index}> <SenderTime>{data.time}</SenderTime> <SenderName>{data.from +":"}</SenderName> <SenderMessage>{data.message}</SenderMessage> < ( ) => data, index < = === ' ' ' ')}> div className {(from data.from? sender : receiver </ > div /MessageRow> Until now the steps are similar to , now we need to change the div that with some conditional style to make a difference on the message owner. (see screenshot) PART I To do this we create the styled.div component and change it on our renderer then send to the control the attribute data as a boolean. NOTE: If you send a boolean like (true,false) you will see an error like "Warning: Received `false` for a non-boolean attribute .." So you should send a boolean as an integer. <MessageRow key={index}> <SenderTime>{data.time}</SenderTime> <SenderName>{data.from +":"}</SenderName> <SenderMessage>{data.message}</SenderMessage> < < = === > Message data {from data.from?1:0} </ > Message /MessageRow> For this you can use , and write a function to use the props as variables inside functions like passed props background :${ props=>props.data? : } '#a4e893' '#FFFFFF' So the idea is that, we check if the value is the owner or not as a boolean and then you can set the correct style for each css property. So you Message Component should look like. Message = styled.div const ` position: relative; padding:5px 10px 5px 10px; margin-top:10px; word-break: break-all; max-width: 450px; border-radius: .4em; background : float: ; margin-left: ; margin-right: ; &::after{ content: ''; position: absolute; top: 50%; width: 0; height: 0; border: 20px solid transparent; border-bottom: 0; margin-top: -10px; //sender right: ; left: ; border-right-color: ; border-left-color: ; border-right: ; border-left: ; margin-right: ; margin-left: ; } ${ props=>props.data? : } '#a4e893' '#FFFFFF' ${props=> props.data? : } 'right' 'left' ${props=>props.data? : } '' '30px' ${props=>props.data? : } '30px' '' ${props=>props.data? : } '0' '' ${props=>props.data? : } '' '0' ${props=>!props.data? : } '#FFFFFF' '' ${props=>props.data ? : } '#a4e893' '' ${props=>props.data? : } '0' '' ${props=>!props.data? : } '0' '' ${props=>props.data? : } '-20px' '' ${props=>!props.data? : } '-20px' '' IMHO I'll try to keep simple the functions in the styles in order to understand easy what is doing. I hope this help you to change your code and make it more comprehensive and simple . Feedback is a simple way to share knowledge and is always welcome :)
![featured image - "Code over a tile"// React - from sass files to Styled-Components. [PART II]](https://hackernoon.imgix.net/images/t68hx3qb2.jpg?auto=format&fit=max&w=256)
