DEV Community

_Khojiakbar_
_Khojiakbar_

Posted on

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;
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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;
Enter fullscreen mode Exit fullscreen mode

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.

Top comments (0)