亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

如何在 ReactJS 中使用 css 調整按鈕的大小

如何在 ReactJS 中使用 css 調整按鈕的大小

郎朗坤 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"

 >

祝你好運!


查看完整回答
反對 回復 2022-01-13
?
慕勒3428872

TA貢獻1848條經驗 獲得超6個贊

也許你可以試試這個方法。制作一個 .css 文件并將以下代碼放在那里


.buttonW {

  width: "100px" !important;

  height: "30px" !important;

}

導入組件頂部的那個 css 文件


并分配它


className="buttonW"


查看完整回答
反對 回復 2022-01-13
  • 2 回答
  • 0 關注
  • 345 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號