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

Question

我在SCSS中有一组语义颜色类，它们应该基于组件的props应用于组件。我正在使用React + Next.js + css-modules.

我想要的:

我在下面写的当前代码工作正常，但我想要一个更简单的方法…为每个组件声明一堆classname来@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来达到这个目的