Integrations

You can theme backpack UI components in several ways:

Global theming

Many EF products have their own set of colours for primary action buttons, form focus and suchlike. These can be set at the top level in whatever global css your site has, i.e:

:root {
    --color-system-primary-accessible: teal;
}

Now your buttons will look like this:

In case you don't want this override to apply to all components, we have added global classnames to all our components too. The classnames follow the convention ef-{COMPONENTNAME}, so if you just wanted to change the primary accessible colour for buttons you could target:

.ef-button {
     --color-system-primary-accessible: teal;
}

Using CSS modules

If using CSS modules in your product, you can do something similar:

CustomButton.tsx

css-modules-example.module.scss

  import { Button, ButtonGroup } from '@ef-global/backpack/Button';
  import styles from './css-modules-example.module.scss';
  export const CssModules = () => {
  return (
      <ButtonGroup className={`u-mt-m ${styles.customButton}`}>
          <Button as={'button'} variant='primary'>
              Primary
          </Button>
          <Button as={'button'} variant='secondary'>
              Secondary
          </Button>
          <Button as={'button'} variant='link'>
              Link
          </Button>
      </ButtonGroup>
  );
};

Using styled components

import styled from "styled-components";
import {Button, ButtonGroup as BackpackButtonGroup} from "@ef-global/backpack/lib/components/Button";
export const StyledComponents = () => {
  const ButtonGroup = styled(BackpackButtonGroup)`
    --color-system-primary-accessible: navy;
  `
  return (
      <ButtonGroup>
        <Button as={'button'} variant='primary'>
          Primary
        </Button>
        <Button as={'button'} variant='secondary'>
          Secondary
        </Button>
        <Button as={'button'} variant='link'>
          Link
        </Button>
      </ButtonGroup>
  )
}

Using tailwind

You can also easily theme backpack components with a tailwind setup.

Inline

Due to css modules specificity, we advise that you use a prefix in your tailwind config. For example, in nextjs, you can add the __next ID added to the <main> tag to provide further specificity.

Since our Button component has child components for the background and content (to ensure the button text is on a different layer to the background and the scale transitions look clean), in this case we can target the classes to the bgClassName and contentClassName props

nextjs

// tailwind.config.js
module.exports = {
...
  important: '#__next'
}

<Button
  as={'button'}
  bgClassName={`bg-slate-600`}
  contentClassName={'text-slate-100'}
  variant="primary"
>
  Content
</Button>

@apply

CustomButton.tsx

customButton.module.scss

import styles from './customButton.module.scss'
<Button
as={'button'}
bgClassName={styles.customButtonBg}
contentClassName={styles.customButtonContent}
variant="primary"
>
Content
</Button>

Overview Get Started