将SCSS中的动态命名嵌套类添加到React中

Question

快速描述：我有一个Announcement组件，它在安装时接收一个type道具。根据type道具中提供的字符串，必须设置一个类。该组件导入了一个.scs模块，我在style变量中对其进行了解构。.scs模块有嵌套类，我无法访问那里的嵌套类。

Component.js

import style from '../styles/Announcement.module.scss';
...
render() {
const { type, message } = this.props;
return <div className={`${style.announcement} ${style[type]}`}>{message}</div>
}

公告.module.scs

@import 'variables';
.announcement {
width: 100%;
padding: 1.5rem;
color: $announcement;
min-height: 15rem;
.success {
background-color: $lightgreen;
}
}

存在_variables.scss文件，并且该文件已导入。.announcement类被应用于<div>。.success类不会被应用(即使type是success(。

我想我可以简单地取消测试这些类，但我想知道为什么它没有得到应用，我想知道是否有任何可能在不使用取消测试的情况下解决这种情况。

提前谢谢！

Answer 1

我认为在您的情况下，最好的解决方案是使用包classNames或clsx。

这是他们的文档的摘录

classNames('foo', 'bar'); // => 'foo bar'
classNames('foo', { bar: true }); // => 'foo bar'
classNames({ 'foo-bar': true }); // => 'foo-bar'
classNames({ 'foo-bar': false }); // => ''
classNames({ foo: true }, { bar: true }); // => 'foo bar'
classNames({ foo: true, bar: true }); // => 'foo bar'

在你的代码中会是这样的

<div 
className={classNames(
styles[announcement], 
{ [styles.success]: type === 'success' }
)} 
>
{message}
</div>