Working With SDL Component Styles

Note: This page relates to a deprecated version of C3 AI UI Framework. Beginning with version 7.13, C3 AI Component Library is the supported UI framework.

If you are not familiar with CSS Modules, please read Authoring modular css before continuing.

The styles included in this CSS library are intended to be used by our SDL components but also by other UIs that want to use the same look and feel. Because of that we have to be very careful to define our styles in a way that suits our components and applications that are using other styles.

Copy link to this section

Example

Consider a button component. We would need to define our component type with c3typ and tsx.

Copy link to this section

C3 Type

type ButtonExample extends ReactFunction {
  style: string enum("square", "round")
}

Copy link to this section

TSX implementation

import { ButtonExample as ButtonExampleProps } from '@c3/types';
/*
 * We are importing our styles here. The styles variable will be a map of strings
 * to strings where the keys are the original class names from ButtonExample.scss
 * and the values will be their unique local value.
 */
import styles from './ButtonExample.scss';

function ButtonExample(props: ButtonExampleProps) {
  const styleClass = `c3-sdl-${props.style}-btn`;
  return <button className={styleClass}></button>;
}

export default ButtonExample;

Copy link to this section

SCSS styles

.c3-sdl-square-btn {
  // ...
}

.c3-sdl-round-btn {
  // ...
}

Normally when using CSS Modules, you would not worry about the class names since they are local to your component. However, for the SDL library to be exported and consumed by other UIs, you need to ensure that class names are meaningful and are as unique as possible when used as globals.