郎朗坤
2022-01-13 16:21:51
我想制作一個定義寬度的按鈕,但是我有一個模板,其中定義了包含樣式的按鈕組件,所以當我嘗試修改按鈕的樣式時,什么也沒發生,這是我的代碼這是我在反應類中調用組件的時候<Button className={classes.buttonW} component={Link} color="success" size="lg" to="/album-carousel-page" > Galeria</Button>我修改css按鈕時的類名buttonW: { width: "100px", height: "30px"}這是模板原始按鈕上方的代碼(我認為非常復雜) button: { minHeight: "auto", minWidth: "auto", backgroundColor: grayColor, color: "#FFFFFF", boxShadow: "0 2px 2px 0 rgba(153, 153, 153, 0.14), 0 3px 1px -2px rgba(153, 153, 153, 0.2), 0 1px 5px 0 rgba(153, 153, 153, 0.12)", border: "none", borderRadius: "3px", position: "relative", padding: "12px 30px", margin: ".3125rem 1px", fontSize: "12px", fontWeight: "400", textTransform: "uppercase", letterSpacing: "0", willChange: "box-shadow, transform", transition: "box-shadow 0.2s cubic-bezier(0.4, 0, 1, 1), background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1)", lineHeight: "1.42857143", textAlign: "center", whiteSpace: "nowrap", verticalAlign: "middle", touchAction: "manipulation", cursor: "pointer", "&:hover,&:focus": { color: "#FFFFFF", backgroundColor: grayColor, boxShadow: "0 14px 26px -12px rgba(153, 153, 153, 0.42), 0 4px 23px 0px rgba(0, 0, 0, 0.12), 0 8px 10px -5px rgba(153, 153, 153, 0.2)" }, "& .fab,& .fas,& .far,& .fal,& .material-icons": { position: "relative", display: "inline-block", top: "0", fontSize: "1.1rem", marginRight: "4px", verticalAlign: "middle" }, "& svg": { position: "relative", display: "inline-block", top: "0", width: "18px", height: "18px", marginRight: "4px", verticalAlign: "middle" },謝謝你幫助我 :) 我討厭在風格上浪費太多時間 :'(
2 回答

尚方寶劍之說
TA貢獻1788條經驗 獲得超4個贊
確保正確導入 CSS 文件...
如果是這樣,請將您的按鈕更改為類似的內容。
<Button
className="buttonW"
component={Link}
color="success"
size="lg"
to="/album-carousel-page"
>
Galeria
</Button>
然后在您的 CSS 中添加句點“?!薄T陬惷?/p>
.buttonW {
width: "100px",
height: "30px"}
..這應該適合你..
如果一切都失敗了,您可以使用如下所示的內聯樣式。
<Button
className="buttonW"
style={{height: '30px', width : '100px'}}
component={Link}
color="success"
size="lg"
to="/album-carousel-page"
>
祝你好運!

慕勒3428872
TA貢獻1848條經驗 獲得超6個贊
也許你可以試試這個方法。制作一個 .css 文件并將以下代碼放在那里
.buttonW {
width: "100px" !important;
height: "30px" !important;
}
導入組件頂部的那個 css 文件
并分配它
className="buttonW"
添加回答
舉報
0/150
提交
取消