Basic Styling in React

Styling in React can be done in multiple ways. The two most common methods are:

• Inline Styling: Apply styles directly on elements using the style attribute with JavaScript objects.
• CSS Stylesheets: Use external CSS files and import them into components.

Inline Styling Syntax

Inline styles in React are written as objects, where CSS properties are camelCased instead of kebab-case.

const headingStyle = {
  color: '#004d40',
  fontSize: '30px',
  fontWeight: '700',
  textAlign: 'center',
  marginBottom: '20px'
};

function StyledHeading() {
  return <h2 style={headingStyle}>Welcome to React Styling</h2>;
}
  

Example: Inline Style in JSX

You can also add inline styles directly in JSX elements like this:

function Button() {
  return (
    <button
      style={{
        backgroundColor: '#00796b',
        color: '#e0f2f1',
        padding: '12px 24px',
        border: 'none',
        borderRadius: '8px',
        cursor: 'pointer',
        fontSize: '16px'
      }}
    >Click Me</button>
  );
}
  

Advantages of Inline Styling

• Styles are scoped to the component, preventing unintended side effects.
• JavaScript control over styles allows dynamic styling based on props or state.
• Easy to define styles close to the JSX, improving component readability.