After a year working as backend developer with python I was exited to learn new frontend stuff. Since I've worked in the past with and furthermore using React on freelance projects I always looking for new topics (like all javascript developers). looking on internet about new stuff I found that seems to be a nice way to work with the  styles in React. Styled-Components I'm going to try this with a Chat Application that I made a few months ago (the particularity of this chat is that it's only between two users, you can find the code here: the idea is to improve this App in further series). https://github.com/ricardogcolombo/chat Chat View One of the functionalities on this chat is the " text when the other user is writing (as you can find in all chats you use today WhatsApp ,Telegram,Slack...).  So the idea it's simple, if Rob start typing then Laura will see a message like: typing message" So we want to change from a react + sass files into a styled component this . typing-message Let's begin with the chat renderer. Basically what we have in this Chat view is a header(name and typing message text), a chat window where you see the messages and the box where you write your messages... so the renderer looks like this ( <div className='chat-title'> {from}
                <TypingMessage to={to} currentMessage={currentMessage}/>
            </div>
            <div className='chat-window'>
                <Messages messages={messages} from={from}/>
                <div  style={{ float:"left", clear: "both" }} ref={e=> this.messagesEnd = e}></div>
            </div>
            <div className='chat-box'>
                <MessageBox  setIsTyping={setIsTyping} onSubmit={()=>onSubmitMessage(sendMessage,currentMessage[from].message,from,to,writtingMessage,moment().format('HH:mm A'))} inputValue={currentMessage[from]} writtingMessage={writtingMessage} from={from} />
                <button className='send-button' onClick={()=>onSubmitMessage(sendMessage,currentMessage[from].message,from,to,writtingMessage,moment().format('HH:mm A'))} ></button>
            </div>
        </div>
        ) return < = > div className 'chat' Let's focus on the Component. If you look into the component code it's short. TypingMessage ./src/components/typing-message/index.js React TypingMessage = ({
    currentMessage,
    to
}) => !!(currentMessage[to] && currentMessage[to].isTyping) && TypingMessage import from 'react' import './typing-message.scss' const {to} is typing... < = > div className 'typing-message' </ > div export default ' ./src/components/typing-messages/typing-message.scss { : / , , ,Arial,Helvetica,Verdana,sans-serif; : white; : absolute; : ; : ; : ;
} .typing-message font 11px 18px 'Open Sans' "Lucida Grande" "Lucida Sans Unicode" color position width 100% padding-top 5px margin 0 Time to change this... First we need to install styled components. In order to do that just open your terminal and go inside the project folder to run. npm install --save styled-components Then we have installed the styled components library so we need to import that to use it, add at the beginning of the file. styled import from 'styled-components' After that you can start moving your div into a Styled-Component 'ish' way. First we are going to move the styles into a component  and put that into a variable. styled.div TypingmessageComponent = styled.div const `
    font:11px/18px 'Open Sans',"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Verdana,sans-serif;
    color: white;
    position: absolute;
    width: 100%;
    padding-top: 5px;
    margin: 0;
` Now, we have a React-Component called with our styles (in our case we used a div element but there are other tags to use like Link, a, Button...you can find them in the docs) . As we changed that now we are able to change our renderer to use our new instead of our like: TypingmessageComponent TypingmessageComponent <div...></div> TypingMessage = ({
    currentMessage,
    to
}) => !!(currentMessage[to] && currentMessage[to].isTyping) && const {to} is typing... < > TypingmessageComponent </ > TypingmessageComponent And yes... that's it.. Your code should look something like. React styled TypingmessageComponent = styled.div TypingMessage = ({
    currentMessage,
    to
}) => !!(currentMessage[to] && currentMessage[to].isTyping) && TypingMessage import from 'react' import from 'styled-components' // import './typing-message.scss' const `
    font:11px/18px 'Open Sans',"Lucida Grande","Lucida Sans Unicode",Arial,Helvetica,Verdana,sans-serif;
    color: white;
    position: absolute;
    width: 100%;
    padding-top: 5px;
    margin: 0;
` const {to} is typing... < > TypingmessageComponent </ > TypingmessageComponent export default Conclusion This styled-components are quite simple to use so you can move your styles in a progressive way until you move all your styles from sass/css/less files depending your development times and both can live together in the meantime you get that... as you can see it's easy to maintain your styles if you have it in the same file as your component code and I think that this is one of the main motivations of this library. If you worked or saw something with Vue.js  maybe you're familiar with, because you have all your code (js,html,styles) in one file. For sure in big projects this will improve the time of maintaining your code. Pro's maybe you should have in mind this when you are testing your app, as you're using third party libraries you should test them also to be sure that are doing what you want. Con's Note: Feedback is always welcome and maybe my writing skills are not the best in the town.

Laura

Progressive

Slack

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

"Code over a tile"// React - from sass files to Styled-Components.

Too Long; Didn't Read

Companies Mentioned

Ricardo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

"Code over a tile"// React - from sass files to Styled-Components.

Too Long; Didn't Read

Companies Mentioned

Ricardo

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES