React is the popular JavaScript front-end library to develop SPA (single page applications) and amazing user interfaces. Popular brands such as Netflix, Skype, and Facebook access React. You can easily style the react apps by allocating the styles to the className prop.
In any React app, the components are the fundamental building blocks of that application. It is mandatory to style those components as every client interacts with the app and requires a better experience. Different ways of styling are available for the components.
Each style carries specific features, pros, and cons. You need to go through them and choose the perfect fit for your project or requirements as a user. If you are unable to make a decision or do not have enough knowledge, then you can hire React developers without hesitation.
React developers will guide you on the right path, and thus achieving your goals or the desired result becomes much easier than ever before. Scroll down the page to know more about React styling.
What to know about CSS
Remember that CSS (Cascading Style Sheets) is the vital building block of web development. Although functionality is critical in modern web development, presenting the content is equally crucial. You can make the web pages more efficient and appealing with CSS techniques.
Here are the different ways of styling components in react:
- Inline CSS
- CSS in JS
- CSS module
- Styled components
In this blog, you will witness inline styling or inline CSS. Since it is the first styling option, beginners should learn about this property.
Inline styling in React app
Although inline styling is a new concept, the lack of support in the browser made inline styling hard to access. Many browser vendors are starting to add support for the FlexBox layouts and CSS Grid. It gives a spotlight to the inline style.
Unlike a traditional webpage, the modern web is more than many images and text. In addition, they are highly engaging and interactive. Inline styles assist you in developing the interactions and engaging with the potential prospects in the new methods.
Inline style means defining the CSS rules for the elements with the help of style attributes in the HTML. You can add the style attribute to any HTML element. It will provide the styles from the inline stylesheet in the document head before other elements in the document.
It indicates that the inline stylesheet will come first regardless of the order in which you add the HTML elements. If you add a few attributes to the element or wish to override the existing style on the page, inline styling is very useful.
It makes you do whatever you want easily and quickly. Did you know that it is easier to apply a unique style to one HTML element at a time with the Inline CSS?
With the help of style attributes, you can assign CSS to a specific HTML element by defining any CSS properties within it. React allows you to add inline styles written as the attributes and passed to the elements. You choose to combine CSS syntax with JSX code with the inline styles.
Syntax
Inline styles in Reach are not mentioned as the string. Rather than, they are specified with the object whose primary key is the style name (written in CamelCase) and whose value is the value of the style (string). You can create the inline styles in any of the following ways.
- By passing the styling directly – style={{property: value}}
i.e., style={{color: ‘blue’}}
- By creating the variable, which stores style properties and passing that variable to the elements – style={styleVariable}
Example of inline CSS from object:
const myStyle = {
color: ‘#ffffff’,
backgroundColor: ‘#000000’,
};
function MyFirstComponent() {
return <div style={myStyle}>My First React Component!</div>;
The output will be:
<div style=”color: #ffffff; backgrond-color: #000000;”>My First React Component!</div>
Code
It is the code creating inline CSS styles by passing the styling directly as the object.
index.js
import React from ‘react’;
import ReactDOM from ‘react-dom’;
import App from ‘./app.js’;
ReactDOM.render(
<App />,
document.getElementById(‘root’)
);
app.js
import React, { Component } from ‘react’;
export default class App extends Component {
render() {
return (
// Passing the styling properties
// as an object.
<div>
<p style={{background: “#74C3E1”,
padding: “20px”,
margin: “20px”}}> Hello, World </p>
</div>
);
}
}
Output:
Plain HTML elements
The string value assigns to the style attributes in the plain HTML elements. The string also includes the series of the CSS property and its value pairs. With the semicolon, every property-value pair is separated. Here is an example of a plain HTML page with inline CSS.
<!DOCTYPE html>
<html>
<head>
<title>Inline CSS Style</title>
</head>
<body>
<p style=”color:#4a54f1; font-size: 18px; padding-top:100px;”>
Welcome to Your Blog Coach!
</p>
</body>
</html>
In the above example, you write the <p> tag with the style attribute and then provide the CSS rules to that <p> tag. It is impossible to specify the inline CSS rules the same as in plain HTML.
You cannot write plain HTML in React, and thus you need to write with JSW. It means the style attribute accepts the JavaScript objects. Then, the object will be in the CamelCased properties. In addition, you cannot write the CSS string with the property value pairs directly.
Example of inline style in react.js
const styleObj = {
fontSize: 17,
color: “#e3e3e3”,
textAlign: “left”,
paddingTop: “50px”,
backgroundColor: “red”,
borderRadius: “5px”
}
function WelcomeComponent() {
return <div style=”{styleObj}”>Welcome to Your Blog Coach!</div>;
}
CSS in JS
Here, you can add the style element to the overall DOM rather than attaching the properties to the DOM mode. It performs similar to the first approach, i.e., inline styles. Here is the example.
import styled from ‘styled-components’;
const MyTitle = styled.div`
color: blue,
background: yellow
‘
<MyTitle>My First CSS-in-JS React component!</MyTitle>
Here is how the code rendered by the browser:
<style>
hash999s99 {
background-color: black;
color: white;
}
</style>
<div class=”hash999s99″>My First CSS-in-JS React component!</div>
The following styled-components look like best practices because they impact the specific component where they get rendered. In addition, it does not affect any other places or components in the app.
Accessing styled-components is the best way of organizing the React components. So, you do not need to make your JSX code direct with more div and span elements. You can render the components with their own styles and make the code easier to read. In addition, you will change the CSS anytime without worrying about the component impact.
Final words
As said earlier, you can also refer our use the inline styling properly in React article to avoid potential troubles. Make sure you engage with reliable and experienced developers after huge research.