Inline CSS in JSX in React JS

In React, CSS can be applied in multiple ways to style components. One of the approaches is using inline styles, which allows you to define styles directly within the JSX code. Inline CSS is a popular choice for small, dynamic, or context-specific styling, as it makes the styling easy to maintain within the component.

1. What is Inline CSS in JSX?

Inline CSS in JSX refers to defining styles within the JSX tags, directly within the component code. This is achieved by passing a JavaScript object to the style attribute of a React element. Unlike traditional CSS, where you define styles in a separate file, inline CSS is applied directly to the elements in your JSX.

2. How to Apply Inline CSS in JSX?

To apply inline CSS in JSX, you need to use the style attribute, which takes a JavaScript object. The keys of this object are camelCased versions of the CSS property names (instead of hyphenated CSS properties), and the values are strings that represent the CSS values.

Example 1: Basic Inline CSS

        
          import React from 'react';

          const App = () => {
            const style = {
              backgroundColor: 'lightblue',
              color: 'darkblue',
              padding: '10px',
              textAlign: 'center'
            };

            return (
              

                
Welcome to Inline CSS in JSX

              

            );
          };

          export default App;

In this example, the div element has inline styles applied using the style attribute. The CSS properties like backgroundColor, color, padding, and textAlign are applied directly in the JSX code.

Example 2: Dynamic Inline CSS

You can also make the inline CSS dynamic by using state or props. This allows styles to change based on the component's state or received props. 

        
          import React, { useState } from 'react';

          const App = () => {
            const [isActive, setIsActive] = useState(false);

            const style = {
              backgroundColor: isActive ? 'green' : 'red',
              color: 'white',
              padding: '20px',
              textAlign: 'center',
              cursor: 'pointer'
            };

            return (
              
 setIsActive(!isActive)}>
                
Click to Change Background Color

              

            );
          };

          export default App;

In this example, the backgroundColor of the div element changes dynamically based on the isActive state. When the user clicks on the div, the state toggles, and the background color switches between green and red.

3. Benefits of Using Inline CSS in JSX

  • Simplicity: Inline CSS allows styles to be defined directly within the component, making it easy to manage small or isolated styles.
  • Dynamic Styles: Inline styles can easily respond to changes in state or props, allowing for dynamic styling based on the component’s logic.
  • Scoped Styles: Since the styles are directly in the component, they are automatically scoped to that component, avoiding potential conflicts with global styles.
  • No Need for External Files: Inline CSS eliminates the need for separate CSS files, which can simplify small applications or specific components.

4. Limitations of Inline CSS in JSX

  • Performance: Inline styles are re-evaluated on each render. If the styles are complex or involve dynamic properties, it could cause performance issues.
  • No Pseudo-Classes/Elements: Inline styles cannot handle pseudo-classes (like :hover) or pseudo-elements (like ::before). For such styles, traditional CSS or CSS-in-JS libraries are needed.
  • No Media Queries: You cannot apply media queries directly in inline styles. For responsive design, you would need to use other styling approaches.
  • Less Readable for Complex Styles: As the styles become more complex, defining them as inline styles can make your JSX code harder to read and maintain.

5. Conclusion

Inline CSS in JSX is a useful technique for styling React components, especially when the styling is simple and dynamic. It allows styles to be scoped to individual components and can react to changes in state or props. However, it has limitations, such as performance concerns with complex styles and the inability to use pseudo-classes or media queries. For more complex or global styles, other approaches like external CSS files, CSS Modules, or CSS-in-JS libraries may be more appropriate.




Advertisement