CSS Prop
We use Emotion’s css prop under the hood in our components. You can pass acss
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:
Styling sub-components
We also assign stable class names to each internal part of each component, to make style overrides as easy as:- Inspect the component in your browser’s dev tools and look for classes prefixed with
fr-
- View the source for the component and use the value of the
part
prop (class name will always befr-${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:
Overriding CSS from the Flow editor
You can override thecss
prop or any other attribute from the Flow editor by providing the props
field in the Advanced YAML editor:
props
field on the given Step. This will override the styling for that specific Step only:
External CSS
If you prefer to use your own CSS workflow, any old CSS will work. You can provide a top-levelclassName
prop to a component via a static stylesheet, CSS Modules, etc. then scope your styles to that:
.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: