Use SCSS modules to isolate styles

The platform supports SCSS modules (.module.scss) to prevent class name collisions and isolate styles within a single component. These modules ensure that styles do not leak outside the component boundary, even when using generic class names like container, label, or header.

Use SCSS modules when:

• You want to write CSS selectors with low specificity (apply to many DOM elements), like h1 or .container
• You want to encapsulate styles for reusable or shared components
• You embed the same component multiple times on a page
• You use generic or common class names
• You want to reduce naming conflicts and simplify CSS maintenance

Avoid SCSS modules when defining layout utilities, global resets, or application-wide theming. Place those styles in a global .scss file under src/ui/styling.

SCSS modules generate a unique class name hash at build time. You import these class names as JavaScript objects in your .tsx file.

Copy link to this section

Isolate styles with a .module.scss file

This example defines a Tag component that uses a local .module.scss file to style a pill-shaped label. The class name used inside the stylesheet differs from the component name to avoid confusion.

// Tag.tsx
import React from 'react';
import styles from '@c3/ui/Tag.module.scss';

const Tag = ({ label }: { label: string }) => {
  return <span className={styles.pill}>{label}</span>;
};

export default Tag;

// Tag.module.scss
.pill {
  background-color: #f5f5f5;
  color: #333;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 12px;
  display: inline-block;
}

Copy link to this section

What gets rendered in HTML

The class name .pill compiles to a scoped, hashed name such as Tag_pill__1a2b3:

<span class="Tag_pill__1a2b3">Important</span>

Other components cannot accidentally target this style without importing the same .module.scss file.

Copy link to this section

Nest styles using SCSS syntax

SCSS modules support variables, mixins, and nested selectors. You can define structured styles using naming conventions like BEM or similar hierarchies.

// Alert.module.scss
.alert {
  background-color: #ffefc0;
  padding: 8px;

  &__title {
    font-weight: bold;
    font-size: 16px;
  }

  &__message {
    font-size: 14px;
  }
}

// Alert.tsx
import styles from './Alert.module.scss';

return (
  <div className={styles.alert}>
    <div className={styles.alert__title}>Warning</div>
    <div className={styles.alert__message}>System status is degraded.</div>
  </div>
);