I am currently working on a Gatsby application that utilizes SCSS.
My code snippet looks like this:
import React from "react";
import styles from "./mosaic.module.scss";
import Tile from '../tile/tile';
const Mosaic = (): JSX.Element => (
<section className="wrapper style1">
<div className="inner">
<h2 className="major">Smaller Projects</h2>
<p>Here under follow minor projects, often unfinished; I show them anyway because they helped me widen my experience. :)</p>
<section className={`${styles["features"]}`}>
{[0,1,2,3,4,5,6].map(e => <Tile key={e}></Tile>)}
</section>
</div>
</section>
)
export default Mosaic;
If I don't import the class from the module with className=${styles["features"]}, it won't work as expected.
However, you may notice that some classes like className="inner" still function properly.
This is because in gatsby-browser.js, I have imported some global CSS using:
import "./src/styles/global.css"
The issue here is the confusion between when to use the styled class and when to stick to the conventional method.
Is there a workaround to consistently utilize either the default styling or the styled approach for all elements?