使用 Next js 时，在 CSS/SASS 模块中使用烤肉串大小写的 CSS 类名

Question

我在 React/Next 中为我的组件使用 SCSS 模块.js但我无法弄清楚如何导入烤肉串案例类。

目前，我只是用驼峰写我所有的 SCSS 类，但这并不理想，因为这意味着我无法使用 SCSS 级联。

(我还在学习 React，因为我自己不太擅长制作动态组件，所以我现在坚持使用 React Strap。

本质上，我想写

.公司标志

而不是：

.公司标志

编辑：className={styles['company-logo']} 导致意外的令牌错误

这是我的组件：

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;

还有我的 SCSS：

.companyLogo {
height: 3rem;
}

Answer 1

className={styles['company-logo']}

应该是你想要的。

Answer 2

您可以使用对象键[]语法。

<img src="..." className={styles['company-logo']}`

Answer 3

<img src="../ss-logo.png" alt="Logo" className={`${style['company-logo']}`}/>

Answer 4

内联：

<img src="../ss-logo.png" alt="Logo" className={`${styles["company-logo"]}`}/>

变量：

var logo = classNames({
[`${styles["company-logo"]}`]: true,
});
return (
<div>
<img src="../ss-logo.png" alt="Logo" className={logo}/>
</div>
)