Inline Style in React - Naukri Code 360

Introduction

Inline styling in React is a technique used to apply styles directly to elements using the style attribute. Unlike traditional CSS, where styles are written in external or internal stylesheets, inline styles in React are defined as JavaScript objects with camelCase properties. This approach allows developers to dynamically manipulate styles within components, offering greater flexibility and control.

In this article, we will discuss inline styles in React, their syntax, and the different ways you can use them effectively.

Inline Styling

Inline styling in React is a way to apply CSS styles directly to elements using JavaScript objects. Unlike traditional CSS, where styles are written in external stylesheets or `<style>` tags, inline styles are defined within the component itself. This makes it easier to manage dynamic styles that change based on user interactions or application state.

In React, inline styles are written as JavaScript objects. Each CSS property is written in camelCase instead of kebab-case. For example, `background-color` in CSS becomes `backgroundColor` in React. Let’s take an example of how inline styling works:

const MyComponent = () => {
  const style = {
    backgroundColor: 'blue',
    color: 'white',
    padding: '10px',
    borderRadius: '5px'
  };


  return (
    <div style={style}>
      This is a styled component using inline styles.
    </div>
  );
};

In this example, the `style` object contains CSS properties like `backgroundColor`, `color`, `padding`, & `borderRadius`. These styles are then passed to the `style` attribute of the `<div>` element.

One of the key benefits of inline styling is its flexibility. Since styles are defined as JavaScript objects, you can easily manipulate them using variables, functions, or state. For instance, you can change the background color dynamically based on user input or application logic.

However, inline styles also have some limitations. They don’t support pseudo-classes like `:hover` or media queries directly. For such cases, you might need to combine inline styles with other styling methods like CSS modules or styled-components.

Style Object

Inline styles in React use a JavaScript object to define CSS properties. Each property is written in camelCase format, which differs slightly from traditional CSS syntax. This makes it easy to write and manage styles programmatically.

Example

import React from 'react';
function App() {
  const styleObject = {
    backgroundColor: 'lightblue',
    color: 'darkblue',
    fontSize: '20px',
    padding: '10px',
    textAlign: 'center',
  };


  return (
    <div style={styleObject}>
      Hello, this is a styled component using inline styles!
    </div>
  );
}


export default App;

Explanation:

backgroundColor: Notice the camelCase syntax instead of background-color.
The styleObject is passed to the style attribute of the <div> element.
When you run this code, you will see a styled div with a light blue background and dark blue text.

Syntax

React’s inline styles require you to use JavaScript objects. This means that all property names are written in camelCase, and the values are strings (except for numeric values like zIndex or lineHeight).

General Syntax

const styleObject = {
  propertyName: 'value',
  anotherProperty: 'value',
};
<div style={styleObject}></div>

Important Points

Properties like margin or padding remain in camelCase (e.g., marginTop, borderRadius).
Numeric values (like width: 100) can be written without quotes unless they require a unit (e.g., width: '100px').
Colors and other string-based values must always be wrapped in quotes.

Example: Styling Components in React

Let’s take a practical example to understand how inline styling works in React. Suppose you’re building a button component that changes its color when clicked. This is a great use case for inline styling because the style needs to be dynamic.

Let’s see how you can implement this:

import React, { useState } from 'react';
const DynamicButton = () => {
  const [isClicked, setIsClicked] = useState(false);


  const buttonStyle = {
    backgroundColor: isClicked ? 'green' : 'blue',
    color: 'white',
    padding: '10px 20px',
    border: 'none',
    borderRadius: '5px',
    cursor: 'pointer',
    fontSize: '16px'
  };

 const handleClick = () => {
    setIsClicked(!isClicked);
  };

  return (
    <button style={buttonStyle} onClick={handleClick}>
      {isClicked ? 'Clicked!' : 'Click Me'}
    </button>
  );
};
export default DynamicButton;

In this code:

1. State Management: We use the `useState` hook to create a state variable `isClicked`. This variable keeps track of whether the button has been clicked or not.

2. Dynamic Styling: The `buttonStyle` object defines the styles for the button. The `backgroundColor` property changes based on the value of `isClicked`. If `isClicked` is `true`, the background color becomes green; otherwise, it stays blue.

3. Event Handling: The `handleClick` function toggles the value of `isClicked` whenever the button is clicked.

4. Rendering: The button’s `style` attribute is set to the `buttonStyle` object, & the `onClick` event is assigned to the `handleClick` function.

Template Literals with JavaScript Expressions

React’s inline styles can also be dynamic. By combining template literals with JavaScript expressions, you can compute style values based on props or state.

Example

import React, { useState } from 'react';
function App() {
  const [isHighlighted, setIsHighlighted] = useState(false);


  const handleClick = () => {
    setIsHighlighted(!isHighlighted);
  };
  const dynamicStyle = {
    backgroundColor: isHighlighted ? 'yellow' : 'white',
    color: isHighlighted ? 'black' : 'gray',
    padding: '20px',
    cursor: 'pointer',
  };

  return (
    <div style={dynamicStyle} onClick={handleClick}>
      Click me to toggle highlight!
    </div>
  );
}

export default App;

Explanation:

The dynamicStyle object changes based on the isHighlighted state.
Clicking the div toggles the background color between yellow and white.
This example demonstrates how you can use inline styles dynamically.

Styled Components

For more complex use cases, styled components can be a better option. They allow you to write CSS directly in your JavaScript code without the need for camelCase or inline objects. Styled components leverage tagged template literals.

Example

import React from 'react';
import styled from 'styled-components';
const StyledDiv = styled.div`
  background-color: lightgreen;
  color: darkgreen;
  font-size: 18px;
  padding: 15px;
  text-align: center;
  &:hover {
    background-color: green;
    color: white;
  }
`;
function App() {
  return (
    <StyledDiv>
      This is a styled component with hover effects!
    </StyledDiv>
  );
}
export default App;

Explanation

The styled-components library allows you to define styles as components.
The StyledDiv component applies styles, including hover effects.
This approach keeps your code clean and separates style logic from the component logic.

Steps to Create React Application

Before using inline styles or styled components, you need a React application. Follow these steps to set one up:

Step 1: Install Node.js

Download and install Node.js from nodejs.org. This will include npm (Node Package Manager), which is required to set up a React app.

Step 2: Create a New React App

Run the following command in your terminal:

npx create-react-app my-app

This will create a new React application in a folder named my-app.

Step 3: Navigate to the App Folder

cd my-app

Step 4: Start the Application

npm start

This will start a development server and open your application in a browser.

Step 5: Write Your Code

Edit the App.js file to include your components and styles

Rule of Thumb

When using inline styles in React, it’s important to follow certain best practices to ensure your code remains clean, maintainable, and efficient. There are some rules of thumb to keep in mind:

1. Use Inline Styles for Dynamic Styling:

Inline styles are best suited for dynamic styles that change based on user interactions or application state. For example, changing the color of a button when it’s clicked or adjusting the size of an element based on screen width.

   const DynamicBox = ({ isActive }) => {
     const boxStyle = {
       width: isActive ? '200px' : '100px',
       height: isActive ? '200px' : '100px',
       backgroundColor: isActive ? 'green' : 'red',
       transition: 'all 0.3s ease'
     };
     return <div style={boxStyle}></div>;
   };

2. Avoid Inline Styles for Static Styles:

For static styles that don’t change, it’s better to use external CSS files or CSS modules. This keeps your component code cleaner and makes it easier to manage styles across your application.

   /* styles.css */
   .staticBox {
     width: 100px;
     height: 100px;
     background-color: blue;
   }


   import './styles.css';


   const StaticBox = () => {
     return <div className="staticBox"></div>;
   };

3. Keep Styles Modular:

Break down your styles into smaller, reusable objects. This makes it easier to apply consistent styles across multiple components and reduces code duplication.

   const baseStyle = {
     padding: '10px',
     borderRadius: '5px',
     fontSize: '16px'
   };


   const primaryStyle = {
     ...baseStyle,
     backgroundColor: 'blue',
     color: 'white'
   };


   const secondaryStyle = {
     ...baseStyle,
     backgroundColor: 'gray',
     color: 'black'
   };

4. Use CamelCase for CSS Properties:

When writing inline styles in React, remember to use camelCase for CSS properties. For example, use `backgroundColor` instead of `background-color` and `fontSize` instead of `font-size`.

5. Combine Inline Styles with Other Styling Methods:

Inline styles don’t support all CSS features, such as pseudo-classes (`:hover`, `:focus`) or media queries. For such cases, combine inline styles with other methods like CSS modules or styled-components.

   const buttonStyle = {
     padding: '10px 20px',
     borderRadius: '5px',
     backgroundColor: 'blue',
     color: 'white'
   };
   // Use CSS modules for hover effects
   import styles from './Button.module.css';


   const Button = () => {
     return (
       <button style={buttonStyle} className={styles.hoverEffect}>
         Click Me
       </button>
     );
   };

6. Test for Performance:

While inline styles are convenient, they can impact performance if overused, especially in large applications. Test your application’s performance and consider alternatives like CSS-in-JS libraries if needed.

Improve Readability

While inline styling in React is powerful, it can quickly become messy if not managed properly. Large components with multiple styles can make the code hard to read and maintain. Let’s take a look at some tips to improve readability when using inline styles:

1. Separate Styles into Variables:

Instead of defining styles directly inside the JSX, create separate variables for styles. This keeps the JSX clean and makes it easier to reuse styles.

   const headerStyle = {
     fontSize: '24px',
     fontWeight: 'bold',
     color: 'darkblue',
     marginBottom: '20px'
   };


   const paragraphStyle = {
     fontSize: '16px',
     color: 'gray',
     lineHeight: '1.5'
   };


   const MyComponent = () => (
     <div>
       <h1 style={headerStyle}>Welcome to My App</h1>
       <p style={paragraphStyle}>This is an example of how to improve readability with inline styles.</p>
     </div>
   );

2. Use Constants for Repeated Styles:

If certain styles are used repeatedly, define them as constants at the top of your file. This reduces redundancy and makes it easier to update styles later.

   const primaryColor = 'blue';
   const secondaryColor = 'gray';
   const buttonStyle = {
     backgroundColor: primaryColor,
     color: 'white',
     padding: '10px 20px',
     borderRadius: '5px'
   };

   const linkStyle = {
     color: secondaryColor,
     textDecoration: 'none'
   };

3. Break Down Complex Styles:

For components with many styles, break them into smaller, logical chunks. This makes the code easier to understand and debug.

   const baseButtonStyle = {
     padding: '10px 20px',
     borderRadius: '5px',
     fontSize: '16px'
   };
   const primaryButtonStyle = {
     ...baseButtonStyle,
     backgroundColor: 'blue',
     color: 'white'
   };
   const secondaryButtonStyle = {
     ...baseButtonStyle,
     backgroundColor: 'gray',
     color: 'black'
   };

4. Use Descriptive Variable Names:

Name your style variables descriptively so that their purpose is clear. For example, use names like `headerStyle`, `buttonStyle`, or `errorMessageStyle` instead of generic names like `style1` or `style2`.

5. Avoid Overusing Inline Styles:

While inline styles are great for dynamic styling, they’re not always the best choice for static styles. For static styles, consider using CSS modules or external stylesheets to keep your code organized.

Frequently Asked Questions

What is the difference between inline styles and CSS stylesheets in React?

Inline styles are defined directly within the component using JavaScript objects, while CSS stylesheets are external files linked to your project.

Can I use pseudo-classes like :hover with inline styles in React?

No, pseudo-classes like :hover cannot be used with inline styles. You need libraries like styled-components or CSS files for that.

Why are React inline styles written in camelCase?

React uses camelCase for consistency with JavaScript object properties, ensuring compatibility with the language's conventions.

Conclusion

Inline styles in React are a powerful way to style components directly within your JavaScript code. By using style objects, template literals, or libraries like styled-components, you can manage styles dynamically and efficiently. This article covered the syntax and use cases of inline styles, including practical examples to help you get started.

You can also check out our other blogs on Code360.