Styling Components in React 🧢

In React, there are several ways to apply styles to your components. The most common methods include inline styles, CSS-in-JS libraries, and external CSS files. Here’s an overview of each method with examples:

1. Inline Styles

Inline styles are applied directly to the elements via the style attribute. They are written as JavaScript objects.

import React from 'react';

const InlineStyleComponent = () => {
  const divStyle = {
    color: 'blue',
    backgroundColor: 'lightgray',
    padding: '10px',
    borderRadius: '5px'
  };

  return (
    <div style={divStyle}>
      Hello, I am styled with inline styles!
    </div>
  );
};

export default InlineStyleComponent;

2. Internal Styles (CSS-in-JS)

CSS-in-JS is a technique where CSS is composed using JavaScript. Libraries like styled-components or emotion are commonly used for this purpose.

Using styled-components:

import React from 'react';
import styled from 'styled-components';

const StyledDiv = styled.div`
  color: blue;
  background-color: lightgray;
  padding: 10px;
  border-radius: 5px;
`;

const StyledComponent = () => {
  return (
    <StyledDiv>
      Hello, I am styled with styled-components!
    </StyledDiv>
  );
};

export default StyledComponent;

3. External CSS Files

You can create a separate CSS file and import it into your React component.
styles.css:

.styled-div {
  color: blue;
  background-color: lightgray;
  padding: 10px;
  border-radius: 5px;
}

Component.js:

import React from 'react';
import './styles.css';

const ExternalStyleComponent = () => {
  return (
    <div className="styled-div">
      Hello, I am styled with an external CSS file!
    </div>
  );
};

export default ExternalStyleComponent;

Summary

• Inline Styles: Best for quick, dynamic styles that change based on props or state.
• Internal Styles (CSS-in-JS): Great for scoped styles, theming, and when using JavaScript to manage CSS.
• External CSS Files: Ideal for larger projects where styles are organized in separate files, promoting reusability and separation of concerns. These methods can be mixed and matched based on the needs of your project.