目前我有以下代碼
FormInput.jsx：
import './FormInput.scss';
const FormInput = ({ label, ...otherProps} ) => {
const { value } = otherProps;
return (
<div className="group">
<input className="formInput" {...otherProps} />
{label && (
<label
className={`${value.length ? 'shrink' : ''} formInput-label`}
>{label}</label>
)}
</div>
)
};
export default FormInput;
在FormInput.scss：
.formInput-label {
transition: 300ms ease all;
position: absolute;
font-size: 18px;
left: 5px;
top: 10px;
&.shrink {
top: -14px;
}
}
我感到困惑的是labelin的目標類FormInput.jsx應該編譯為：
.shrink .formInput-label
但是 SASS 檔案中的那個將編譯為：
.formInput-label.shrink
我的問題是，如果 JSX 和 SASS 檔案中的類目標不同，如何仍然應用正確的樣式？JSX 的類以相反的順序排列，中間有一個空格。
uj5u.com熱心網友回復：
class 屬性（或className在 JSX 中）定義了一個類串列。類的語法在 HTML 和 CSS 中是不同的，但是同一元素上的類的順序在這兩者中都無關緊要。
JSX 呈現為 HTML，因此呈現為，它定義了類串列["shrink", "formInput-label"]并與 CSS 選擇器兼容.shrink.formInput-label。
此外，一個 CSS 選擇器也.shrink可以匹配元素（只是具有較低的特異性等級），因為它匹配串列中的一個類。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/487198.html
標籤：javascript css 反应 粗鲁的 jsx