如何在 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"

    },

谢谢你帮助我 :) 我讨厌在风格上浪费太多时间 :'(

Answer 1

确保正确导入 CSS 文件...如果是这样，请将您的按钮更改为类似的内容。<Button&nbsp; &nbsp; className="buttonW"&nbsp; &nbsp; component={Link}&nbsp; &nbsp; color="success"&nbsp; &nbsp; size="lg"&nbsp; &nbsp; to="/album-carousel-page"&nbsp;>&nbsp;Galeria</Button>然后在您的 CSS 中添加句点“。”。在类名之前.buttonW {width: "100px",height: "30px"}..这应该适合你..如果一切都失败了，您可以使用如下所示的内联样式。<Button&nbsp; &nbsp; className="buttonW"&nbsp; &nbsp; style={{height: '30px', width : '100px'}}&nbsp; &nbsp; component={Link}&nbsp; &nbsp; color="success"&nbsp; &nbsp; size="lg"&nbsp; &nbsp; to="/album-carousel-page"&nbsp;>祝你好运！

Answer 2

也许你可以试试这个方法。制作一个 .css 文件并将以下代码放在那里.buttonW {&nbsp; width: "100px" !important;&nbsp; height: "30px" !important;}导入组件顶部的那个 css 文件并分配它className="buttonW"