In web development, styling our application means making it visually attractive and user-friendly by customizing its appearance. It makes our applications more readable, attractive, and engaging for users. There are various options to apply styling, such as CSS, React Sass, styled-components, and much more.
In this Answer, we will compare React sass and styled-components. Let's understand both of them individually first.
React Sass is an extension of CSS as it provides additional functionalities, including global variables, mixins, and functions, which increases the flexibility and reusability of styles across components. It involves writing our styling in .scss files and importing them into our components. When we load our application in the browser, our Sass files are compiled into regular CSS, and styling is applied to our components.
The following code example demonstrates how we can use React Sass.
import React from 'react';
import './App.scss';
const App = () => {
return (
<div className="app">
<h1 className="heading">Welcome to Educative!</h1>
<p className="paragraph">Let's learn React Sass.</p>
</div>
);
};
export default App;
In App.js file:
Line 1: We include react in our code.
Line 2: We import the App.scss file, allowing our component to apply styles from it.
Lines 4–11: In our app class, we define a <h1> and <p> element and define values for both of them.
In App.scss file:
Lines 1–2: We define two Sass variables and assign color values to them. We can use these variables multiple times in our style sheet.
Line 3: We import styles from another Sass file named '_paragraph-styles'. We can assume the code written in paragraph-styles is now a part of our style sheet.
Lines 5–15: We nest the styling of .heading class in the styling of .app class. This is another functionality provided by React Sass. We set the styling properties for both. Here, we use styling variables in line 6 and line 10 to set styling values for our properties.
In _pargraph-styles.scss file:
Line 2–7: We apply styles to our .paragraph class in our App.js file.
Styled-components is a library in JavaScript that helps us directly style the elements in our JavaScript file using a special syntax. With styled-components, each component has its unique styles that are encapsulated and won't interfere with our other components. Using the function, we create our styled-component and define styles for our components inside the backticks (``) with CSS syntax. We can then use this component in our code.
The following code example demonstrates how we can use React styled-components.
import React from 'react';
import styled from 'styled-components';
const AppContainer = styled.div`
background-color: rgb(183, 183, 223);
padding: 20px;
`;
const Heading = styled.h1`
color: rgb(35, 35, 143);
font-size: 24px;
margin-bottom: 10px;
`;
const Paragraph = styled.p`
color: rgb(183, 183, 223);
font-size: 16px;
`;
const App = () => {
return (
<AppContainer>
<Heading>Welcome to Educative!</Heading>
<Paragraph>Let's learn React with Styled Components.</Paragraph>
</AppContainer>
);
};
export default App;
In App.js file:
Line 1: We include react in our code.
Line 2: We import the styled function from the styled-components library.
Lines 4–18: We define our styled-components, AppContainer , Heading, and Paragraph using the styled function. We define the style we want to apply to the components in the backticks ``.
Lines 20–27: We use the styled-components we defined earlier and define text values for them.
Now that we have discussed the concept of React Sass and styled-components, let's compare them.
React Sass | Styled-components | |
Approach | It is a CSS preprocesser meaning it extends functionality of CSS. | It is a JavaScript library. |
Syntax | It uses a CSS-like syntax with additional features like variables, nesting, mixins, and functions. | It uses tagged template literals to define styles within JavaScript code. |
Files | We write it in separate | It is written in our React component without creating any separate files. |
Styling | It allows global styling which is shared among multiple components. | It allows encapsulated styling which is unique for each class. |
React Sass and styled-components have their own strengths and can be used effectively in different situations. If we prefer using an approach similar to CSS where we want to keep styling sheets independent from our JavaScript code, React Sass is suitable for us. When we want to focus more on a component-centric approach and want to add styling to our JavaScript code, we use styled-components.
Free Resources