在 React (Next.js + css-modules) 中使用 SCSS @exported classNames 的更短方式

Question

我在 SCSS 中有一套语义颜色类，应该根据组件的 props 将其应用于组件。我正在使用 React + Next.js + css-modules.

我想要什么：

我在下面编写的当前代码可以正常工作，但我想要一种更简单的方法...为每个组件声明一堆类名以@extend 其他东西太过分了！我想直接在jsx部分写扩展。有没有更好（更动态）的方法来做到这一点？也许内联扩展？

不是有效代码，但我正在寻找类似这样的代码：

export default function Component({ status }) {
    return (
        <div style={@extend %{status}}>
          ...
        </div>
    )
}

代码

这是语义文件。我将它导入到其他 scss 文件中以扩展类:

/* _semantics.scss */

%warning {
    background: orange;
    color: red;
}

%error {
    background: red;
    color: black;
}
...

示例组件

/* component.module.scss */

@use "semantics" as *;

.warning {
    @extend %warning;
}

.error {
    @extend %error;
}

.success {
    @extend %success;
}

// component.jsx

import css from "./component.module.scss"

export default function Component({ status }) {
    return (
        <div className={css[status]}>
          ...
        </div>
    )
}

// index.jsx

<Component status="warning">...</Component>

备注

我正在寻找替代方法，所以：

使用包即可
使用 @include（mixins）代替 @extend 就可以了
使用 .semantic-class 代替 %semantic-class 就可以了

Answer 1

你可以使用全局css来达到这个目的

在 React (Next.js + css-modules) 中使用 SCSS @exported classNames 的更短方式

Shorter way to use SCSS @exported classNames in React (Next.js + css-modules)

sass

reactjs

css-modules

我想要什么：

代码

示例组件

备注