Browse Courses

Styles

July 29, 2025 5 min read Programming React Frontend Docs IBM-FSSD Styles Css React-Components

This document explains different ways to apply styles in React, including inline styles, CSS modules, and styled-components, with examples and best practices for component styling.

On this page

Styles in React

In React, styles can be applied to components in various ways, including inline styles, CSS stylesheets, CSS modules, and styled-components. Each method has its own use cases and advantages.

Inline Styles

Inline styles are defined directly within the component using a JavaScript object. This method is useful for dynamic styles that depend on component state or props.

 1function MyComponent() {
 2  const style = {
 3    color: 'blue',
 4    backgroundColor: 'lightgray',
 5    padding: '10px',
 6    borderRadius: '5px'
 7  }
 8
 9  return <div style={style}>Hello, World!</div>
10}
11// Or
12function MyComponent() {
13  return (
14    <div
15      style={{
16        color: 'blue',
17        backgroundColor: 'lightgray',
18        padding: '10px',
19        borderRadius: '5px'
20      }}
21    >
22      <p style={{ margin: 0 }}>Hello, World!</p>
23    </div>
24  )
25}
  • Inline styles are defined as a JavaScript object.
  • Property names are written in camelCase (e.g., backgroundColor).
  • Values are specified as strings.

CSS Modules

CSS Modules allow you to write CSS that is scoped locally to the component, preventing style conflicts. They are implemented as a file with a .module.css extension.

 1/* MyComponent.module.css */
 2.container {
 3  color: blue;
 4  background-color: lightgray;
 5  padding: 10px;
 6  border-radius: 5px;
 7}
 8
 9.text {
10  margin: 0;
11}

Import the CSS module in your component:

1import styles from './MyComponent.module.css'
2
3function MyComponent() {
4  return (
5    <div className={styles.container}>
6      <p className={styles.text}>Hello, World!</p>
7    </div>
8  )
9}
  • CSS modules automatically generate unique class names, preventing conflicts with other styles in the application.
  • CSS modules are imported as objects, where each class name is a property of the object.

Styled-Components

Styled-components is a library that allows you to write CSS in JavaScript, creating styled components with encapsulated styles.

 1import styled from 'styled-components'
 2
 3const Container = styled.div`
 4  color: blue;
 5  background-color: lightgray;
 6  padding: 10px;
 7  border-radius: 5px;
 8`
 9
10const Text = styled.p`
11  margin: 0;
12`
13
14function MyComponent() {
15  return (
16    <Container>
17      <Text>Hello, World!</Text>
18    </Container>
19  )
20}

Conclusion

React offers multiple approaches to styling components, each with unique benefits. Inline styles are best for dynamic, component-scoped changes. CSS modules provide local scoping and prevent conflicts. Styled-components enable encapsulated, reusable styles using JavaScript. Choose the method that best fits your project’s needs.

FAQ

  1. They allow dynamic styling using JavaScript objects within components
  2. They are used to import global CSS files
  3. They automatically generate unique class names
  4. They require a separate .css file for each component
(1) Inline styles in React are defined as JavaScript objects and allow dynamic styling within components.

  1. Styles may conflict and override each other
  2. React will throw an error
  3. The components will not render
  4. The class name will be automatically renamed
(1) Using the same class name in a global CSS file can cause style conflicts and unintended overrides.

  1. CSS modules scope styles locally to components
  2. CSS modules require a .module.css extension
  3. CSS modules are imported as objects in JavaScript
  4. CSS modules apply styles globally by default
(4) CSS modules do not apply styles globally; they scope styles locally to prevent conflicts.

  1. They allow writing CSS directly in JavaScript files
  2. They require a separate CSS file for each component
  3. They do not support dynamic styling
  4. They cannot be used with functional components
(1) Styled-components enable writing CSS in JavaScript, supporting dynamic and encapsulated styles.

  1. Whether the class name is referenced correctly from the imported styles object
  2. If the CSS file is imported globally
  3. If the style property is used instead of className
  4. If the component is a class component
(1) The class name must be referenced from the imported styles object for CSS modules to work.

MethodCharacteristic
A. Inline Styles1. Styles are scoped locally using unique class names
B. CSS Modules2. Styles are defined as JavaScript objects
C. Styled-Components3. CSS is written in JavaScript and encapsulated
D. Global CSS4. Styles can cause conflicts across components
A-2, B-1, C-3, D-4.

Styled-components allow you to create reusable, encapsulated styles for React components using JavaScript.

True. Styled-components enable reusable and encapsulated styles using JavaScript.

  1. Property names use camelCase
  2. Values are specified as strings
  3. Styles are applied using the className attribute
  4. Styles can be dynamic based on state or props
(3) Inline styles are applied using the style attribute, not className.

  1. They prevent style conflicts by scoping styles locally
  2. They require less code than inline styles
  3. They automatically convert CSS to JavaScript
  4. They are only used for global styles
(1) CSS modules prevent style conflicts by scoping styles to individual components.

  1. Use JavaScript objects for inline styles and update them based on state or props
  2. Only use global CSS files
  3. Use static class names for all components
  4. Avoid using any styles in components
(1) Dynamic styles in React are often applied using JavaScript objects that change based on state or props.
Vdom in React
Module Summary