Styling
All components provided by Frigade are fully customizable. You can change the look and feel of any component by passing in a custom style object.
Customizing Frigade appearances
The appearance
attribute is available on all Frigade components allows you to customize the look and feel of any component.
Styling the base theme
The base theme of Frigade can be styled by passing in the theme
in the defaultAppearance
prop to the config
object in the FrigadeProvider
component.
The following properties are available:
Property | Description |
---|---|
colorPrimary | The primary color — used on buttons, links, etc. |
colorBackground | The background color to apply on components. |
colorText | The color to apply to text. |
colorTextOnPrimaryBackground | The color to apply to text on top of the primary background color. |
colorTextSecondary | The color to apply to secondary text (typically used in subheaders). |
fontSize | The font size to apply to text. |
fontSmoothing | The font smoothing to apply to text. |
fontWeight | The font weight to apply to text. |
borderRadius | The border radius to apply to components. |
Example:
<FrigadeProvider
publicApiKey='my-api-key'
config={{
defaultAppearance: {
theme: {
colorText: '#3d3d3d',
colorTextSecondary: '#494949',
colorTextOnPrimaryBackground: '#fff',
colorPrimary: '#2956B5',
colorBorder: '#E2E2E2',
},
styleOverrides: {
checklistTitle: {
fontSize: '1.5rem',
fontWeight: 'bold',
}
}
},
}}
>
// Your app goes here
</FrigadeProvider>
To style individual components, you can pass in the appearance
prop with the same syntax as the defaultAppearance
prop on any Frigade component.
Overriding styles on individual components
All Frigade components contain unique class names and can be targeted individually using CSS selectors.
Additionally, the styleOverrides
prop in the appearance
attribute allows you to override the styles of individual components programmatically.
It can be used conveniently with frameworks such as Tailwind CSS to quickly customize the look and feel of Frigade components.
All components that can be targeted are prefixed with fr-
in front of their primary class name.
You can find an individual class by inspecting the DOM of the component you wish to target.
For instance, if you wish to apply the class bg-red
to make the primary buttons in Frigade red, you can target the fr-button
in the following way:
Inspect the DOM
Inspect the DOM of the element you wish to target. Below is an example using Google Chrome’s Inspector:
Target the Frigade element
In the inspector, you can see that the primary button has the class fr-button
.
You can now target this element by adding the following to your component:
appearance={{
styleOverrides: {
'button': 'bg-red'
},
}}
Additional Options
Global CSS
Alternatively, you can simply target a Frigade CSS class using your own global CSS file.
.fr-tooltipContainerWrapper .fr-tooltipContainer .fr-smallSubtitle {
font-size: 14px;
color: #c6cbd2;
border-color: #4e5765;
letter-spacing: 0.01em;
}
Inline CSS
If you want to apply inline styles, you can do so by passing in a CSSProperty
object to a Frigade component:
appearance={{
styleOverrides: {
'button': {
backgroundColor: 'red'
}
}
}}