Importing FastStore UI component styles

If you are using a FastStore UI component and want to apply its styles to your FastStore project, follow the steps below.

There are two different scenarios on how to import FastStore UI component styles:

Overriding a component: For this use case, we will override the ProductTitle component within the ProductDetails section.
Creating a new section: For this use case, we will create a new section in the CMS called OurStore.

Before you begin

Ensure you have a basic understanding of overrides

Refer to the Overriding components and props and Creating a new section guides for more information. In this guide, we will use the ProductTitle component and OurStores section.

Using CSS modules

We recommend using CSS Modules to style your new component.

Importing styles when overriding a component

For this scenario, we will use as an example the override of the ProductTitle component within the ProductDetails section.

Open your FastStore project, navigate to the components folder, and create the customProductTitle.module.scss file. This file is responsible for importing the FastStore UI component style.
Add the following code to the customProductTitle.module.scss file.

copy


_10.customProductTitle {
_10  @import '@faststore/ui/src/components/molecules/Tag/styles.scss';
_10}

This code imports the Tag styles to the custom component that you are creating.

Import the styles in the CustomProductTitle.tsx file and add a className to the section


_14import React from 'react'
_14import { ProductTitle, Tag } from '@faststore/ui'
_14
_14
_14import styles from './customProductTitle.module.scss'
_14
_14export default function CustomProductTitle() {
_14  return (
_14    <section className={styles.customProductTitle}>
_14      <ProductTitle title={<h1>New headphones</h1>} />
_14      <Tag variant="warning" label="On sale" onClose={() => {}} />
_14    </section>
_14  )
_14}

Run yarn dev in the terminal and open the local development server to see the changes. You should see a result similar to the image below:

${"base64":"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAACCAIAAADwyuo0AAAACXBIWXMAABYlAAAWJQFJUiTwAAAAJUlEQVR4nAEaAOX/AOXl5tTT09XT0fDw7wDFw8UOCApXVFXCwsXvKBAp8Kll8gAAAABJRU5ErkJggg==","img":{"src":"https://vtexhelp.vtexassets.com/assets/docs/src/importing-styles___6de1d121d0acc88b4545d04955c3eb89.png","width":1316,"height":764,"type":"png"}}$

Importing styles when creating a new section

To follow this guide we recommend creating the OurStores section, which we will use as an example.

With the section on the page, add some styles to it by opening the components folder and creating the ourStores.module.scss file. This file will import the FastStore UI components styles. Add the following code to the ourStores.module.scss file:

copy


_10.ourStores {
_10  @import '@faststore/ui/src/components/atoms/Button/styles.scss';
_10  @import '@faststore/ui/src/components/atoms/Select/styles.scss';
_10  @import '@faststore/ui/src/components/molecules/SelectField/styles.scss';
_10}

This code imports the Button and SelectField styles to the custom component that you are creating. You also need to import the Select component styles, since SelectField inherits it.

Now, import this stylesheet to OurStores.tsx file and apply it.

{4-5,13}


_47import React from 'react'
_47import { Button, Icon, SelectField } from '@faststore/ui'
_47
_47import styles from './ourStores.module.scss'
_47
_47export interface OurStoresProps {
_47  title: string
_47  description: string
_47}
_47
_47export default function OurStores(props: OurStoresProps) {
_47  return (
_47    <section className={styles.ourStores}>
_47      <h2>{props.title}</h2>
_47      <p>{props.description}</p>
_47      <div>
_47        <SelectField
_47          id="select-state-store"
_47          label="State:"
_47          options={{
_47            newYork: 'New York',
_47            arizona: 'Arizona',
_47            massachusetts: 'Massachusetts',
_47            hawaii: 'Hawaii',
_47          }}
_47        />
_47        <SelectField
_47          id="select-city-store"
_47          label="City:"
_47          options={{
_47            newYorkCity: 'New York City',
_47            phoenix: 'Phoenix',
_47            boston: 'Boston',
_47            honolulu: 'Honolulu',
_47          }}
_47        />
_47        <Button
_47          variant="secondary"
_47          icon={<Icon name="ArrowRight" />}
_47          iconPosition="right"
_47        >
_47          Find Store
_47        </Button>
_47      </div>
_47    </section>
_47  )
_47}

You should be able to see something like the following:

${"base64":" ","img":{"width":2552,"height":946,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":135138,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/without-styles___4680d2a9a67e4175f3b73eff036ca8ac.png"}}$

Let's add more styles to it. You can customize it using the design tokens and component's data attributes.

copy


_42.ourStores {
_42  @import '@faststore/ui/src/components/atoms/Button/styles.scss';
_42  @import '@faststore/ui/src/components/atoms/Select/styles.scss';
_42  @import '@faststore/ui/src/components/molecules/SelectField/styles.scss';
_42
_42  width: 100%;
_42  display: flex;
_42  flex-direction: column;
_42  justify-content: center;
_42  align-items: center;
_42  padding: var(--fs-spacing-5);
_42  margin: auto;
_42  background-color: var(--fs-color-neutral-bkg);
_42
_42  [data-fs-select-field] {
_42    flex-direction: column;
_42    align-items: flex-start;
_42
_42    [data-fs-select] {
_42      border: var(--fs-border-width) solid var(--fs-border-color);
_42      margin-top: var(--fs-spacing-0);
_42      width: 10rem;
_42      height: var(--fs-control-min-height);
_42
_42      select {
_42        width: 100%;
_42      }
_42    }
_42  }
_42}
_42
_42.ourStores__title {
_42  font-size: var(--fs-text-size-title-section);
_42  margin-bottom: var(--fs-spacing-1);
_42}
_42
_42.ourStores__content {
_42  display: flex;
_42  align-items: flex-end;
_42  column-gap: var(--fs-spacing-5);
_42  margin: var(--fs-spacing-5);
_42}

{14,16}


_47import React from 'react'
_47import { Button, Icon, SelectField } from '@faststore/ui'
_47
_47import styles from './ourStores.module.scss'
_47
_47export interface OurStoresProps {
_47  title: string
_47  description: string
_47}
_47
_47export default function OurStores(props: OurStoresProps) {
_47  return (
_47    <section className={styles.ourStores}>
_47      <h2 className={styles.ourStores__title}>{props.title}</h2>
_47      <p>{props.description}</p>
_47      <div className={styles.ourStores__content}>
_47        <SelectField
_47          id="select-state-store"
_47          label="State:"
_47          options={{
_47            newYork: 'New York',
_47            arizona: 'Arizona',
_47            massachusetts: 'Massachusetts',
_47            hawaii: 'Hawaii',
_47          }}
_47        />
_47        <SelectField
_47          id="select-city-store"
_47          label="City:"
_47          options={{
_47            newYorkCity: 'New York City',
_47            phoenix: 'Phoenix',
_47            boston: 'Boston',
_47            honolulu: 'Honolulu',
_47          }}
_47        />
_47        <Button
_47          variant="secondary"
_47          icon={<Icon name="ArrowRight" />}
_47          iconPosition="right"
_47        >
_47          Find Store
_47        </Button>
_47      </div>
_47    </section>
_47  )
_47}

After applying these additional styles, you should be able to see this final look:

${"base64":" ","img":{"width":2552,"height":946,"type":"png","mime":"image/png","wUnits":"px","hUnits":"px","length":129326,"url":"https://vtexhelp.vtexassets.com/assets/docs/src/with-styles___4b1cd40d4dcbbba544fd051b1f2dcb36.png"}}$