title: How can I resize a button with css in ReactJS
body: <p><img src="https://i.stack.imgur.com/OUw9p.png" alt="I want that those buttons have the same size, but the template is configure depending of the content letter."></p>
  
  <p>I want to make a button with a define width, but I have a template with the button component defined including styles, so when I try to modify the style of the button, it happened nothing, here is my code</p>
  
  <p>Here is when I call the component in the react class</p>
  
  <pre><code>&lt;Button
      className={classes.buttonW}
      component={Link}
      color="success"
      size="lg"
      to="/album-carousel-page"
   &gt;
   Galeria
  &lt;/Button&gt;
  </code></pre>
  
  <p>The classname when I modify the css button</p>
  
  <pre><code>buttonW: {
    width: "100px",
    height: "30px"
  }
  </code></pre>
  
  <p>And here is the code above the template original button (Very complex for my opinion)</p>
  
  <pre><code>  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",
      "&amp;:hover,&amp;: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)"
      },
      "&amp; .fab,&amp; .fas,&amp; .far,&amp; .fal,&amp; .material-icons": {
        position: "relative",
        display: "inline-block",
        top: "0",
        fontSize: "1.1rem",
        marginRight: "4px",
        verticalAlign: "middle"
      },
      "&amp; svg": {
        position: "relative",
        display: "inline-block",
        top: "0",
        width: "18px",
        height: "18px",
        marginRight: "4px",
        verticalAlign: "middle"
      },
      "&amp;$justIcon": {
        "&amp; .fab,&amp; .fas,&amp; .far,&amp; .fal,&amp; .material-icons": {
          marginRight: "0px",
          position: "absolute",
          width: "100%",
          transform: "none",
          left: "0px",
          top: "0px",
          height: "100%",
          lineHeight: "41px",
          fontSize: "20px"
        }
      }
    },
    fullWidth: {
      width: "100%"
    },
  
  </code></pre>
  
  <p>Thank you for helping me :) I hate to lose too much time with styles :'(</p>