Raw CSS Versus Inline Styles in React
Jul 8, 2020 • 5 Minute Read
Introduction
The stylesheet is a crucial part of any web or mobile-based app used to beautify elements created using a scripting language like HTML. Each element needs a separate CSS rule to take the stylesheet effect.
React supports both inline and raw CSS by using a stylesheet file that can be achieved using various pre-processors like SCSS, CSS, SASS, and many more. In this guide, you will learn the difference between raw CSS and inline CSS.
When Can Inline CSS Be Used?
Inline CSS is one of the most conventional approaches to assign styles to various elements in a component, but inline CSS in React can only be used if the styles are dependent on state or props values.
This means that the style can be assigned only if the required values come from the state or props object.
The example below is a simple approach to assign an inline CSS to any React element.
Set the state variable as shown below.
constructor() {
super();
this.state = {
isSectionSelected: true
};
}
The next step is to add the inline style based on the state variable, as explained below.
render() {
const { isSectionSelected } = this.state;
return (
<div>
<div
style={{
color: isSectionSelected ? "red" : "blue"
}}
>
This is a section to be selected/deselected
</div>
</div>
);
}
In the above example, observe that there is one state variable, isSectionSelected, so based on the value(true/false), the specific style values will be applied to an element.
So, this kind of situation could be more suited to using inline CSS, in which the element's styles are not fixed and need to be updated based on absolute values.
When Can Raw CSS Be Used?
Raw CSS can be defined in various ways, like setting CSS in separate files, implementing CSS classes into the component file, and assigning to the variables.
The most advisable approach for creating the stylesheet into the component is using Stylesheet, as explained below.
const styles = StyleSheet.create({
color: "blue",
fontSize: "10px",
padding: "13px"
});
And then, you can assign that stylesheet to the element, as shown below.
<div style={styles.xyz}>
<table> ... </table>
</div>
Hence, the styles can be applied directly to the element based on the styles provided along with the stylesheet definition.
Another approach where you can create a separate CSS stylesheet file and assign the class to the element can also be used, as shown below.
Styles.css
.table1 {
background: silver;
}
.table2 {
font-size: 22px;
padding: 10px
}
The next step is to import that local CSS file.
import "./style.css";
Moving forward, for the sake of demonstration, let's use <table> element along with the various rows and columns and apply the class names along with the element.
render() {
return (
<div>
<table border="2" className="table1 table2">
<tr>
<td>Row1 Col1</td>
<td>Row1 Col2</td>
</tr>
<tr>
<td>Row1 Col1</td>
<td>Row1 Col2</td>
</tr>
<tr>
<td>Row1 Col1</td>
<td>Row1 Col2</td>
</tr>
</table>
</div>
);
}
The prop called classNames accepts the name of the given CSS classes, and then styles are applied to that respective element.
The Main Difference Between Raw CSS and Inline CSS
In this guide, we have seen examples of inline styles and CSS classes, and both approaches are useful for styling React components.
Through stylesheet files, you can achieve app modularity because every style related to a single module resides in a separate file. Still, using inline styles, it's challenging to identify and update the CSS changes.
Code readability is worst in inline style implementation, while managing styles using the raw CSS is easy to maintain.
The inline styles take more space in DOM because all the styles are defined internally along with the DOM element, while raw CSS is described separately, creating no issues for the compiler while compiling the file.
Conclusion
Styling a component or element in React is straightforward if you know and understand the possible approaches while developing web or mobile-based apps.
In this guide, you have learned how to use the inline styles approach and raw CSS approach while styling the component, and I would recommend that you choose your path wisely based on your app requirements.
