javascript - Next.js - 使用组件级 scss (component.module.scss) 仅更改父类以使用 style['className']

Question

我目前正在尝试使用https://nextjs.org/docs/basic-features/built-in-css-support#adding-component-level-css找到一种在 next.js 上使用组件级 scss 的方法

无需使用“style ['className']”定义我的所有类，只需第一个。

示例：JSX：

<Parent className={style['parent-class-name']}>
 <Child className="child">
   Example
 </Child>
</Parent>

SCSS：

.parent-class-name{
  .child{
    text-decoration: underline;
    transform: rotate(-7deg);
  }
}

但我现在一直找不到方法，我最终构建了一个函数来使用“类名”库自动定义项目（如果你有兴趣，我会把它留在这里）

 import classNames from 'classnames';

const classNameGenerator = (classString,styleObject) => {
    let classList = classString.split(" ");
    classList = classList.map( classItems => styleObject[classItems] || classItems);
    return classNames(...classList);
}

export default classNameGenerator;

有什么替代方法吗？

谢谢，祝您度过愉快的一天！

标签： javascriptreactjssassnext.js