css-prefix.md

Customizing CSS class prefix

Guidelines for how to customize CSS class prefix

Table of Contents

• Overview
• Example
• Building Sass code from carbon-components with custom CSS prefix
• Building carbon-components-react code with custom CSS prefix
  • Dependency injection
  • On-the-fly module editing

Overview

In latest version of carbon-components and carbon-components-react, you can use custom CSS prefix. This document explains how to use custom CSS prefix.

Example

An example project can be found at custom-css-prefix in our example directory.

Building Sass code from carbon-components with custom CSS prefix

Custom CSS prefix in carbon-components Sass code can be used by setting $prefix Sass variable, like:

$prefix: 'your-brand';
@import '~carbon-components/scss/globals/scss/styles.scss';

Building carbon-components-react code with custom CSS prefix

Custom CSS prefix in carbon-components-react code can be used by changing prefix property in settings module in carbon-components on-the-fly. This can be done in either of two ways:

1. Dependency injection
2. On-the-fly module editing

Dependency injection

Dependency injection can be done by using a custom WebPack "resolve plugin". See webpack.config.js in our example for the details.

On-the-fly module editing

Dependency injection can be done by using something like WebPack string-replace-loader.