Documentation
Feedback
Guides
Storefront Development

Storefront Development
FastStoreCustomizing sections and componentsSection override
Overriding section styles
To customize the styles of a native section, you can use the className property, which works similarly to React's className.

Before you begin

Before delving into this guide, make sure you have already overridden a component, as presented in the [getOverriddenSection function] guide.

Step by step

Let’s use the example provided in the getOverriddenSection function guide, where the Simple Alert styles are being overridden via the className:

_11
import { getOverriddenSection } from '@faststore/core';
_11
import { AlertSection } from '@faststore/core';
_11
import styles from './simple-alert.module.scss'
_11
_11
const SimpleAlert = getOverriddenSection({
_11
Section: AlertSection,
_11
className: styles.simpleAlert,
_11
components: { Icon: { props: { weight: "bold" } } },
_11
});
_11
_11
export default SimpleAlert;

  1. Create the simple-alert.module.scss file within the sections folder.
  2. In the simple-alert.module.scss file, declare the class that you have added to the Simple Alert component. In this case, .simpleAlert.
  3. Add the scss styles you desire to override:

    _10
    .simpleAlert{
    _10
    [data-fs-alert-content] {
    _10
    color: Blue;
    _10
    font-weight: bold;
    _10
    }
    _10
    }

  4. Run yarn dev to sync your changes.
Contributors
1
Photo of the contributor
+ 1 contributors
Was this helpful?
Yes
No
Suggest edits (Github)
Contributors
1
Photo of the contributor
+ 1 contributors
On this page