CSS Overrides

​

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.

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. Read the source for the component and use the value of the part prop (class name will always be fr-${part})

​

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";
  }
}