​
CSS Prop

We use Emotion’s css prop under the hood in our components. You can pass a css object in at the top level of any of our components to create scoped styles for that specific instance of that component.

Since the css prop is scoped to each component, you can treat it as though it were a style prop with added functionality. For example:

// This CSS will be compiled at runtime by Emotion and applied to
// the `.fr-card` wrapper at the top level of the Card component

<Frigade.Card
  css={{
    backgroundColor: "goldenrod",
  }}
/>

​
Styling sub-components

We also assign stable class names to each internal part of each component, to make style overrides as easy as:

<Frigade.Tour
  css={{
    ".fr-tooltip-content .fr-tooltip-close": {
      backgroundColor: "pink",
    },
    ".fr-button-primary": {
      backgroundColor: "fuchsia",
    },
  }}

  {...}
/>

To find the stable class names for any given component, you can either:

  1. Inspect the component in your browser’s dev tools and look for classes prefixed with fr-
  2. View the source for the component and use the value of the part prop (class name will always be fr-${part})

​
Global overrides

If you want to style every instance of a Frigade component (or write any other general CSS), the <Frigade.Provider /> component also accepts a css prop. It writes global CSS into the document, so use it with caution.

Since every Frigade Component has its own stable classname, you can override every <Button.Primary /> simply by writing CSS in object syntax:

<Frigade.Provider
  css={{
    ".fr-button-primary": {
      backgroundColor: "aquamarine",

      "&:hover": {
        backgroundColor: "honeydew",
      },
    },
  }}

  {...}
/>

To override the styles for every Frigade Button, use a wildcard attribute selector:

<Frigade.Provider
  css={{
    "[class*='fr-button']": {
      backgroundColor: "maroon",

      "&:hover": {
        backgroundColor: "cornsilk",
      },
    },
  }}

  {...}
/>

​
Overriding CSS from the Flow editor

You can override the css prop or any other attribute from the Flow editor by providing the props field in the Advanced YAML editor:

props:
  css:
    backgroundColor: "blue"
    ".fr-button-primary":
      backgroundColor: "chartreuse"
steps: ...

You can also override the styling on specific Steps by providing the props field on the given Step. This will override the styling for that specific Step only:

steps:
  - id: step-1
    props:
      css:
        ".fr-button-primary":
          backgroundColor: "chartreuse"

​
External CSS

If you prefer to use your own CSS workflow, any old CSS will work. You can provide a top-level className prop to a component via a static stylesheet, CSS Modules, etc. then scope your styles to that:

<Frigade.Tour className="my-scoped-component" {...} />

.my-scoped-component {
  & .fr-button-primary {
    backgroundcolor: "chartreuse";
  }
}

Note: If you use external CSS to target .fr- classnames, your CSS must be source-ordered after Frigade’s CSS in order to properly override the built-in Component styles.

If you don’t have control over source-ordering in your app, you can increase the specificity of your selectors instead:

body :is(.fr-title) {
  font-size: 42px;
}

​
Tailwind

You can use Tailwind’s arbitrary variants to style the inner sub-components of a Frigade component:

<Frigade.Banner className="[&_.fr-title]:text-fuchsia-500" {...} />