我在 SCSS 中有一組語意顏色類，它們應該根據它們的 props 應用于組件。我正在使用 React Next.js css-modules。
我想要的是：
我在下面撰寫的當前代碼可以正常作業，但我想要一個更簡單的方法……為每個組件宣告一堆 classNames 以 @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很好
uj5u.com熱心網友回復：
您可以使用全域 css 來實作此目的
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/337013.html