[英]css styles not applied CSS Modules react
我正在使用 react-scripts: 5.0.1 和我有我的樣式的 module.css 文件。 我的一個樣式文件看起來像這樣。 首先我必須注意一些 module.css 工作正常。 看來問題可能出在 classNames.bind 上,但我不確定,我對這個問題有點陌生。
.rectangle {
height: 100%;
padding-top: 3px;
& > .title {
color: var(--red-70);
font-size: 16px;
line-height: 20px;
margin-right: 12px;
}
& > .value {
color: white;
font-size: var(--message-text-size);
line-height: var(--message-text-size);
white-space: nowrap;
}
}
然后我將這個文件導入到我的 jsx 文件中。
import style from './styles.module.css'
之后我使用它如下
const cx = classNames.bind(style);
const Rectangle = ({ title, value }) => (
<Stack className={style.rectangle}>
<div className={style.title}> { title } </div>
<div className={style.value}> { value } </div>
</Stack>
);
有任何解決這個問題的方法嗎? 我根本沒有接觸 cra 的 webpack 配置。
我創建了這個代碼沙箱來重現這種行為並發現了兩件事:
.rectangle {
height: 100%;
padding-top: 3px;
}
.title {
color: var(--red-70);
font-size: 16px;
line-height: 20px;
margin-right: 12px;
}
.value {
color: white;
font-size: var(--message-text-size);
line-height: var(--message-text-size);
white-space: nowrap;
}
classNames.bind()
不是使事情正常運行所必需的,所以我只是將其注釋掉。 但是搜索這種方法,這個classnames
名似乎是庫的一部分,正確的使用方法應該是這樣的,基於這個鏈接:const cx = classnames.bind(style);
const Rectangle = ({ title, value }) => (
<Stack className={cx('rectangle')}>
<div className={cx('title')}> { title } </div>
<div className={cx('value')}> { value } </div>
</Stack>
);
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.