Question

我在React / Next.js中为我的组件使用SCSS模块，但是我不知道如何导入kebab-case类。

目前，我只是在camelCase中编写所有SCSS类，但这并不理想，因为这意味着我无法利用SCSS级联。

（我仍在学习React，因为我本人并不擅长制作动态组件，所以我现在仍坚持使用React Strap。）

基本上，我想写

.company-logo

代替：

.companyLogo

编辑：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']}`

使用Next js时在CSS / SASS模块中使用kebab-case CSS类名

2 个答案: