Skip to Content
DocumentationGuidesDevelopersResourcesNext Gen Styling

Next Gen Styling

Camp Next Gen is not opinionated on how components are styled. This decision enables platform engineers to use the styling solution that best fits their needs. See below for examples.

Minimal

In building Camp Next Gen components, we use minimal tooling built around vanilla CSS. Here is an example of how an element could be styled using this approach:

/* styles.module.css */
@import '@camp/tokens/dist/tokens.css';
 
.wrapper {
  margin-bottom: var(--space-3);
}
// MyComponent.tsx
import React from 'react';
import { Button } from '@camp/button';
import styles from './styles.module.css';
 
export const MyWrapper = () => (
  <div className={styles.wrapper}>
    <Button>Click me</Button>
  </div>
);

This creates the following markup:

<div class="_wrapper_174ly_3">
  <button ... />
</div>

The only extra tool used above is CSS Modules , which is supported by simply enabling a flag in Webpack . This tool adds support for local scoping of styles, which is an approach we strongly recommend for avoiding potential styling conflicts outside of your feature.

Dynamic styles

For dynamic styles, we also use the clsx package (239B) to apply classes conditionally. See below for a different take on the above example.

/* styles.module.css */
@import '@camp/tokens/dist/tokens.css';
 
.wrapper {
  margin-bottom: var(--space-3);
}
 
.noMargin {
  margin-bottom: 0;
}
// MyComponent.tsx
import React from 'react';
import clsx from 'clsx';
import { Button } from '@camp/button';
import styles from './styles.module.css';
 
export const MyWrapper = ({ noMargin = true }) => (
  <div className={clsx(styles.wrapper, noMargin && styles.noMargin)}>
    <Button>Click me</Button>
  </div>
);

This creates the following markup:

<div class="_wrapper_ojhdv_3 _noMargin_ojhdv_7">
  <button>...</button>
</div>

This tool can also be used to accommodate complex scenarios. Here is a snippet from our <Banner> component:

const bannerStyles = clsx(
  styles.banner,
  onDismiss && styles.hasDismiss,
  toastStyles && styles.toastStyles,
  styles[appearance], // passes in the appearance prop as a dynamic class name
);

And another from <Text>:

className={clsx(
  styles.text,
  size && styles[size],
  calculatedSize && styles[calculatedSize],
  styles[type],
  weight && styles[`weight-${weight}`],
  className, // className prop
)}

See the clsx docs  for details and even more options.

CSS-in-JS

If you prefer CSS-in-JS, here is an example of how you could style an element using Emotion :

import { css } from '@emotion/css';
import { Space } from '@camp/tokens';
import { Button } from '@camp/button';
 
const wrapperStyles = css`
  margin-bottom: ${Space[3]};
`;
 
export const MyWrapper = () => (
  <div className={wrapperStyles}>
    <Button>Click me</Button>
  </div>
);

This produces the following markup:

<div class="css-8qbqv4">
  <button>...</button>
</div>

Of course, there are many more options when it comes to CSS-in-JS libraries. See the Emotion docs  for more options in Emotion alone.

styled() Utility

We don’t recommend using this as it is deprecated, but you can still use the styled() utility (which is built on an older version of Emotion). See below for an example:

import styled from '@activecampaign/camp-core-styled';
import { Space } from '@camp/tokens';
import { Button } from '@camp/button';
 
const Wrapper = styled('div', {
  transformProps: {
    noMargin(value) {
      if (value) {
        return {
          marginBottom: 0,
        };
      }
    },
  },
  renderProps: ['noMargin'],
})({
  marginBottom: Space[3],
});
 
export const MyWrapper = () => (
  <Wrapper>
    <Button>Click me</Button>
  </Wrapper>
);
Last updated on