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 the look and feel of Frigade

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:

• 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

The styleOverrides prop in the appearance attribute allows you to override the styles of individual components. 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:

1. Inspect the DOM of the button you wish to target. Below is an example using Google Chrome’s Inspector:

2. 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'
  },
}}

Alternatively, you can simply target this CSS class using your own global CSS file.

If you want to simply apply inline styles, you can do so by passing in a CSS a CSSProperty object:

appearance={{
  styleOverrides: {
    'button': {
      backgroundColor: 'red'
    }
  }
}}