C3 AI Documentation Home

Override css

Since the C3 AI UI Component Library comes with styled components, we make it possible to override those styles with slight differences for different use cases.

Overview

PathHow to importHow to override
cssLibrary@c3/cssLibrary/...Only through wrapWithMetadataId or with a custom component
src/ui/styling@c3/ui/...Use a .scss file with the same name in src/ui/styling
src/.../{type}.module.scss@c3/ui/...Use a module.scss file with the same name anywhere in src
src/.../{type}.scss@c3/ui/...Use a .scss file with the same name anywhere in src

Overriding styles for one component instance

If just a single component instance needs to be overridden, it's recommended to use wrapWithMetadataId as true on the component instance.

JSON
// SDLDemo.DemoGrid.json
{
  "type" : "UiSdlConnected<UiSdlDataGrid>",
  "component" : {
    "wrapWithMetadataId" : true,
    // Rest of component configuration
  }
}

This will wrap the component instance with an extra div with a className. The className is in the form of c3-metadata-id-{componentId}, where the component ID should be all lowercase and all occurrence of '.' replaced by '-'. This class can then be used to specify css for only that component instance as seen below:

Css
.c3-metadata-id-sdldemo-demogrid {
  // styles to apply
}

Overriding styles for one component type

You can create new styles or override existing style declarations by using .css or .scss files. To create or override a style:

  1. Create a custom component
  2. Wrap the component with the new style by importing the custom .scss file. From here, any styles applied in the new .scss file will apply only if they are more specific. See here for more about CSS Specificity. If they are the same specificity as the existing css, the css file that is loaded in last will take precedence, leading to race conditions with styles.

Only .css or .scss files are supported. There are several [data attributes] (https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes) that wrap the entire application that can be used to help create more specific css.

Data AttributeValue
data-root-pkgThe name of the root package of the application
data-test-idrouter
data-pathThe path of the current route being used
data-target-moduleThe target module of the page being rendered. This is the first part of the component ID, so if the component is MyApplication.SamplePage, the target module is MyApplication.

Example - Override the style of a modal component

Start by creating the following files:

  • MyApplication.MyCustomModal.tsx: Custom page component instance under {package}/src/customInstances folder.
  • MyCustomModal.scss: Custom component under {package}/src/ui/styling folder.
  • MyApplication.CustomComponentPage.json: Custom modal styles under {package}/ui/c3/meta folder.

Use the following example to create your MyApplication.MyCustomModal.tsx file:

TypeScript
import UiSdlModal from '@c3/ui/UiSdlModal';

import '@c3/ui/styling/MyCustomModal.scss';

const MyCustomModal = (props) => {
  return <UiSdlModal {...props} />
};

export default MyCustomModal;
  1. Use the following example to create your MyCustomModal.scss file:
SCSS
// Override existing modal styles - inspect html to see existing class names
.c3-modal-body {
  .c3-modal-sub-header {
    // Contrived example
    background-color: #fff;
  }
}

Override a custom scss file

If the custom css/scss file is in src/ui/styling in a dependent package, it can be completely overridden by creating a file with the same name in src/ui/styling in the new package. This method is a full-file override, meaning:

  • The css file used in the application will be the one specified in the root package
  • No styles defined in the css file for dependent packages will be available
  • If you want specific styles defined in the css file of dependent packages, you have to copy the style definitions, and make sure they are available in the css file of the root package.

Overriding a src/.../{type}.scss or src/.../{type}.module.scss

.scss files that share a name with a c3typ are handled differently and do not need to be in src/ui/styling. To completely override these files, a file with the same name can be placed anywhere in the src folder without remixing the type. In this case, just as with overriding src/ui/styling files, the previous version of the file will be completely wiped, and only styles from the new file will be used.

Was this page helpful?