ReactJS - Inline Style

React provides a unique way of directly writing the CSS in the react component and using it inside JSX. The concept is called CSS in JS and provides many advantages over traditional usage of styles.

Let us learn what is inline styling and how to use it react component.

Concept of inline styling

CSS enables the developer to design the UI of the web application. React provides first class support for CSS and allows CSS to be imported directly into the react application. Directly importing CSS into a react component is as simple as importing a package.

import './App.css'

But, importing css directly into the web component has one major disadvantage, Global namespace. Global style may affect the style of an individual component if there is a conflict in the class name. Developer need to be careful to assign some prefix to make sure that the conflict will not happen.

The other way around is to allow the Javascript to manage the CSS and it is called CSS in JS. React allows the CSS to be used inside the JSX through special CSS syntax. React provides a style props for every component, which can be used specify inline style. The inline style should be provided in a Javascript object. The object should follows the below mentioned rules,

  • The object key should be CamelCased version of normal CSS attributes. For example, the background-color should be specified as backgroundColor.

{
   backgroundColor: "red"
}

  • The object value should be one of the allowed values of the corresponding object key in CSS and should be in string format. For example, the font-size CSS attributes and its value (12px) should be specified as follows −

{
   fontSize: "12px"
}

React will handle the conflict and render the application correctly.

Applying inline style

Let us learn how to apply inline style in a react application in this section.

First of all, create a new react application and start it using below command.

create-react-app myapp
cd myapp
npm start

Next, open App.css (src/App.css) and remove all the CSS classes.

// remove the css

Next, create a simple component, SimpleStyle (src/Components/SimpleIcon.js) as shown below −

import React from "react";
class SimpleStyle extends React.Component {
   displayStyle = {
      fontFamily: 'Times New Roman',
      fontSize: "24px",
      color: "red"
   }
   render() {
      return (
         <div>
            <div style={this.displayStyle}>
               Sample text to understand inline style (object as variable) in React component
            </div>
            <hr />
            <div style={{ fontFamily: 'Arial', fontSize: "24px", color: "grey"}}>
               Sample text to understand inline style (object as expression) in React component
            </div>
         </div>
      )
   }
}
export default SimpleStyle

Here we have,

  • Styled the first div using variable (displayStyle).

  • Styled the second div using expression.

Next, open App component (src/App.js) and update the content with SimpleStyle component as shown below −

import './App.css'
import React from 'react';
import SimpleStyle from './Components/SimpleStyle'

function App() {
   return (
      <div className="container">
         <div style={{ padding: "10px" }}>
            <div>
               <SimpleStyle />
            </div>
         </div>
      </div>
   );
}
export default App;

Here we have,

  • Imported the SimpleStyle component.

  • Used SimpleStyle component to render the calender icon.

Finally, open the application in the browser. The content will be rendered as shown below −

Inline Style

Summary

Inline styling helps developer to quickly include the CSS style without worrying about the conflict of the CSS styles. Also, the syntax is very similar to CSS and it makes it easy for the developer to use the feature without much learning curve.

Advertisements