[英]React styled: Wrapper component produces `Using kebab-case for css properties in objects is not supported. Did you mean ariaLabel?` error
[英]Using kebab-case CSS classnames in CSS/SASS modules when using Next js
我在 React/Next.js 中为我的组件使用 SCSS 模块,但我不知道如何导入 kebab-case 类。
目前,我只是在 camelCase 中编写所有 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;
}
className={styles['company-logo']}
应该是你想要的。
您可以使用 object 键[]
语法。
<img src="..." className={styles['company-logo']}`
<img src="../ss-logo.png" alt="Logo" className={ ${style['company-logo']}
}/>
排队:
<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>
)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.