Overriding section styles

FastStore Customizing sections and components Section override

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.

Instructions

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


_11import { getOverriddenSection } from '@faststore/core';
_11import { AlertSection } from '@faststore/core';
_11import styles from './simple-alert.module.scss'
_11
_11const SimpleAlert = getOverriddenSection({
_11Section: AlertSection,
_11className: styles.simpleAlert,
_11components: { Icon: { props: { weight: "bold" } } },
_11});
_11
_11export default SimpleAlert;

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

_10.simpleAlert{ _10 [data-fs-alert-content] { _10 color: Blue; _10 font-weight: bold; _10 } _10}
Run yarn dev to sync your changes.