React CSS Styling

React CSS Styling

Styling in React can be achieved using various methods such as inline styles, CSS classes, CSS modules, or styled-components. Each approach has its own advantages and use cases.

In this tutorial, we will explore the most common methods to style React components with detailed examples.

1 Inline Styles for CSS Styling

Inline styles are defined directly within the component as a JavaScript object. This method is simple and ensures that the styles are scoped to the specific element.

App.js

import React from 'react';

function InlineStyling() {
  const headingStyle = {
    color: 'blue',
    fontSize: '24px',
    textAlign: 'center'
  };

  return <h2 style={headingStyle}>This is styled using inline styles!</h2>;
}

export default InlineStyling;

Explanation:

• headingStyle: A JavaScript object containing CSS properties and their values.
• style: The property used in JSX to apply the inline styles.
• This approach is useful for simple, component-specific styles.

Output: