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

Question

我想制作一個定義寬度的按鈕，但我有一個定義了按鈕組件的模板，包括樣式，所以當我嘗試修改按鈕的樣式時，什么也沒發生，這是我的代碼

這是我在反應類中調用組件的時候

<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"
    },
    "&$justIcon": {
      "& .fab,& .fas,& .far,& .fal,& .material-icons": {
        marginRight: "0px",
        position: "absolute",
        width: "100%",
        transform: "none",
        left: "0px",
        top: "0px",
        height: "100%",
        lineHeight: "41px",
        fontSize: "20px"
      }
    }
  },
  fullWidth: {
    width: "100%"
  },

謝謝你幫助我 :) 我討厭在樣式上浪費太多時間 :'(

Answer 1

確保正確導入 CSS 文件...

如果是這樣，請將您的按鈕更改為這樣的內容。

<Button
    className="buttonW"
    component={Link}
    color="success"
    size="lg"
    to="/album-carousel-page"
 >
 Galeria
</Button>

然后在你的 CSS 中，加上句號“.”。 在類名之前

.buttonW {
width: "100px",
height: "30px"}

..這應該適合你..

如果一切都失敗了，您可以使用內聯樣式，如下所示。

<Button
    className="buttonW"
    style={{height: '30px', width : '100px'}}
    component={Link}
    color="success"
    size="lg"
    to="/album-carousel-page"
 >

祝你好運！

Answer 2

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

.buttonW {
  width: "100px" !important;
  height: "30px" !important;
}

導入組件頂部的 css 文件

並分配它

className="buttonW"