Usage of Styles and CSS in Components

In this topic, we’ll learn how to apply styles and CSS to React components to improve the visual presentation of our applications.

For this, we can use different approaches. One of them is using CSS classes directly in the JSX elements of our components. For example:

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

function MyComponent() {
  return (
    <div className="my-component">
      <h1>My Component</h1>
      <p>This is an example of a React component with CSS styles.</p>
    </div>
  );
}

export default MyComponent;

Additionally, we can also use styling libraries like styled-components or Emotion, which allow us to write CSS styles directly in JavaScript. For example:

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

const StyledComponent = styled.div`
  background-color: #f0f0f0;
  padding: 20px;
  border-radius: 5px;
`;

function MyComponent() {
  return (
    <StyledComponent>
      <h1>Styled Component</h1>
      <p>This is an example of a React component styled with styled-components.</p>
    </StyledComponent>
  );
}

export default MyComponent;

These approaches allow us to create visually appealing and well-organized components, ensuring a better experience for end users.

Therefore, understanding how to apply styles and CSS to React components is essential for developing high-quality web applications.

Compartilhar

Compartilhar

Siga-me