Dynamic Styling in React Applications

Inline Styles

Inline styles are JavaScript objects applied directly to elements via the style attribute.

They allow easy dynamic changes by modifying the style object based on state or props.

• Styles are scoped to the element.
• No need for separate CSS files.
• Limited support for pseudo-classes and media queries.

Conditional Class Names

Using conditional logic to apply different CSS classes based on component state or props is a common pattern.

This approach leverages traditional CSS and class selectors.

• Keeps styles in CSS files for separation of concerns.
• Supports all CSS features including pseudo-classes.
• Requires managing class names dynamically.

CSS Modules

CSS Modules provide scoped CSS by automatically generating unique class names.

They allow dynamic class assignment while avoiding global CSS conflicts.

• Write CSS normally but import styles as objects.
• Combine with conditional class names for dynamic effects.
• Supported by many React build tools like Create React App.

Styled-Components and CSS-in-JS

Styled-components is a popular CSS-in-JS library that lets you write CSS inside JavaScript files.

It supports dynamic styling through props and theme providers.

• Styles are tightly coupled with components.
• Supports dynamic props for conditional styling.
• Enables theming and automatic critical CSS injection.

Example: Inline Styles with State

This example changes the background color of a button when clicked using inline styles.

Example: Conditional Class Names

Here, a CSS class is conditionally applied to highlight a selected item.

Example: Styled-Components with Props

Styled-components can use props to dynamically adjust styles, such as changing button color based on a prop.