Previous

React CSS Styling

Styling Approaches in React

1. Inline Styles

  • Apply styles directly in JSX using inline styles.
  • Useful for small, specific style changes.

2. CSS Modules

  • Use CSS Modules for local scoping of styles.
  • Enables modular and scoped styling for React components.

3. Styled Components

  • Create styled components with the styled-components library.
  • Encourages the use of components for styling, providing a more readable and maintainable codebase.

4. CSS-in-JS Libraries (Emotion)

  • Utilize CSS-in-JS libraries like Emotion.
  • Provides a dynamic and expressive way to write styles directly within your JavaScript code.

5. Global Styles

  • Apply global styles using various methods, such as plain CSS files.
  • Useful for styles that need to be applied globally across the entire application.

6. Theming with Styled Components

  • Implement theming in styled components using a theme provider.
  • Allows the creation of a consistent visual theme throughout the application.

Examples for each of these approaches:

Inline Styles

import React from 'react';

const InlineStyleComponent = () => {
  const style = {
    color: 'blue',
    fontSize: '16px',
    fontWeight: 'bold'
  };

  return (
    <div style={style}>
      This is a component with inline styles.
    </div>
  );
};

export default InlineStyleComponent;

CSS Modules

// styles.module.css
.moduleComponent {
  color: green;
  font-size: 18px;
}

// ModuleStyleComponent.jsx
import React from 'react';
import styles from './styles.module.css';

const ModuleStyleComponent = () => {
  return (
    <div className={styles.moduleComponent}>
      This is a component with CSS Modules.
    </div>
  );
};

export default ModuleStyleComponent;

Styled Components

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

const StyledComponent = styled.div`
  color: purple;
  font-size: 20px;
`;

const StyledComponentExample = () => {
  return (
    <StyledComponent>
      This is a styled component.
    </StyledComponent>
  );
};

export default StyledComponentExample;

CSS-in-JS Libraries (Emotion)

import React from 'react';
import { css } from '@emotion/react';

const emotionStyle = css`
  background-color: yellow;
  padding: 10px;
`;

const EmotionStyledComponent = () => {
  return (
    <div css={emotionStyle}>
      This is a component styled with Emotion.
    </div>
  );
};

export default EmotionStyledComponent;

Global Styles

// styles.css
body {
  background-color: #f0f0f0;
}

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

const App = () => {
  return (
    <div>
      This is the main app component.
    </div>
  );
};

export default App;

Theming with Styled Components

import React from 'react';
import styled, { ThemeProvider } from 'styled-components';

const theme = {
  primaryColor: 'blue',
  secondaryColor: 'green'
};

const ThemedComponent = styled.div`
  color: ${props => props.theme.primaryColor};
  background-color: ${props => props.theme.secondaryColor};
`;

const ThemedApp = () => {
  return (
    <ThemeProvider theme={theme}>
      <ThemedComponent>
        Themed component with Styled Components.
      </ThemedComponent>
    </ThemeProvider>
  );
};

export default ThemedApp;
Previous