Currently, I am utilizing SCSS modules to style my components in React/Next.js but I can't seem to grasp how to import kebab-case classes.
As of now, I find myself writing all my SCSS classes in camelCase format, which is not the most efficient approach as it restricts me from taking advantage of SCSS cascading features.
(I am still in the learning phase with React and struggling with creating dynamic components on my own, so I rely on React Strap for assistance at the moment.)
Essentially, what I desire is to write:
.company-logo
rather than:
.companyLogo
EDIT:
triggers an unexpected token errorclassName={styles['company-logo']}
This is my Component:
import styles from './styles/Navbar.module.scss'
const NavComponent = (props) => {
const [isOpen, setIsOpen] = useState(false);
const toggle = () => setIsOpen(!isOpen);
return (
<div>
<img src="../ss-logo.png" alt="Logo" className={styles.companyLogo}/>
</div>
);
}
export default NavComponent;
And here is my SCSS:
.companyLogo {
height: 3rem;
}