我想洗掉一個 css 檔案并使用 Tailwind 重寫其內容。組件中有一個道具，應根據其值應用不同的“大小”類。試著寫自己，但我不明白該怎么做。
有一個CSS：
.star {
margin-left: 10px;
&.size-l {
width: 16px;
height: 16px;
}
&.size-m {
width: 10px;
height: 10px;
}
}
評級組件：
export function Raiting ({ stars, size = 'm' }: Props) {
const getStars = () => {
const starsArray = [];
for (let i = 0; i < stars; i ) {
starsArray.push(<StarIcon key={i} className={cn(styles.star, styles[`size-${size}`])} />);
}
return starsArray;
};
return <div>{getStars()}</div>;
}
如何將 StarIcon className 重寫為 Tailwind？
className={cn(styles.star, styles[`size-${size}`])
uj5u.com熱心網友回復：
您可以將三元運算式與您傳遞的道具一起用作條件來確定將哪些樣式應用于您的圖示：
className={size === 'm' ? 'w-2.5 h-2.5' : 'w-4 h-4'}
或者，如果您想更靈活一點，以防您需要考慮更多大小，您可以創建一個包含您希望使用的所有類的列舉，然后使用您傳遞的道具選擇正確的類：
const sizes = {
s: "w-1.5 h-1.5"
m: "w-2.5 h-2.5",
l: "w-4 h-4",
xl: "w-6 h-6",
}
export const Example = ({ size }) => (
<div className={`class-1 class-2 ${sizes[size]}`} />
)
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/512270.html
標籤：css反应顺风CSS
上一篇：如何在偏離中心的文本下劃線？