Skip to content

Latest commit

 

History

History
178 lines (127 loc) · 3.98 KB

styling.md

File metadata and controls

178 lines (127 loc) · 3.98 KB

React JS Styling

Styling in React enables you to design visually appealing user interfaces. This guide will cover several methods of styling components in React, including traditional CSS, inline styles, and CSS-in-JS libraries.

Table of Contents

Introduction to React Styling

React does not have an opinion on how you put styles into your application. Therefore, React provides you with the ability to style components using various approaches.

Using Traditional CSS

Traditional CSS can be used in React by linking stylesheets in your HTML file or by importing CSS files directly into your JavaScript.

import './App.css';

This method is simple and familiar to most developers but can cause naming conflicts if not carefully managed.

Example:

Suppose you have a CSS file named App.css with the following content:

.container {
  margin: 20px;
  padding: 20px;
  border: 1px solid #ccc;
}

You can apply this style to your component like this:

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

const App = () => {
  return <div className="container">Hello, World!</div>;
};

Inline Styles

Inline styles in React are specified as objects, where the property names are camelCased instead of using dashes.

const style = {
  color: 'blue',
  backgroundColor: 'black'
};

const MyComponent = () => {
  return <div style={style}>Styled Content</div>;
};

Inline styles are convenient for quick styling of elements without leaving your JavaScript code.

Example:

Here’s how you might use inline styles to adjust the layout of a component:

import React from 'react';

const style = {
  padding: '20px',
  margin: '20px',
  borderRadius: '5px',
  border: '1px solid #ddd'
};

const Box = () => {
  return <div style={style}>This is a styled box.</div>;
};

CSS Modules

CSS Modules provide a way to make CSS locally scoped by default. By using CSS Modules, styles are scoped locally to the component and not globally.

import styles from './App.module.css';

const MyComponent = () => {
  return <div className={styles.myComponent}>Styled Content</div>;
};

CSS Modules help in avoiding class name conflicts across your application.

Example:

Create a CSS Module file App.module.css:

.myComponent {
  background-color: #f0f0f0;
  color: #333;
  padding: 15px;
  border-radius: 8px;
}

And use it in your React component:

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

const MyComponent = () => {
  return <div className={styles.myComponent}>Styled Content</div>;
};

Styled Components

Styled Components is a CSS-in-JS library that allows you to write traditional CSS code to style your components in JavaScript files.

import styled from 'styled-components';

const StyledDiv = styled.div`
  color: red;
  background-color: black;
`;

const MyComponent = () => {
  return <StyledDiv>Styled Content</StyledDiv>;
};

Styled Components help in building highly reusable and modular components.

Example:

Here is how you can style a button with hover effects using Styled Components:

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

const Button = styled.button`
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  &:hover {
    background-color: darkblue;
  }
`;

const MyComponent = () => {
  return <Button>Click Me</Button>;
};

Best Practices

  • Consistency: Keep your styling consistent throughout the application.
  • Scalability: Use a styling method that scales well with your application size.
  • Performance: Be aware of the performance implications of your styling choices, especially with large applications.

[EOF]