轮廓按钮边框半径

Question

关于如何使用 material UI 中的按钮组件实现此边框形状的任何建议，感谢您的反馈。

我尝试使用以下代码：

 singup: {
    "&.MuiButton-outlinedPrimary": {
      fontWeight: 500,
      fontFamily: "Rubik",
      fontSize: "16px",
      textTransform: "none",
      marginLeft: "3rem",
      borderRadius: "20%",
      paddingLeft: "10px",
      paddingRight: "10px",
    },
  },

<Button variant="outlined" size="small" className={classes.singup}>
            Sign Up
          </Button>

这就是我得到的

Answer 1

border-radius of CSS 将始终采用两个参数 X 和 Y。

像在您的代码 borderRadius: "20%" 中那样在 '%' 中分配一个值将让它占据容器（按钮）高度的 20% 和容器宽度的 20%。所以它会像你的情况一样形成一个不规则的形状。

在 'px' 中分配一个值，例如 borderRadius: "20px" 将使其在高度和宽度上都采用实心 20px，以便以平滑的方式完成裁剪。

Answer 2

而不是使用

borderRadius: "20%"

使用

borderRadius: "20px"

Answer 3

使用 px 而不是 %。您可以在下面看到您的工作示例：

.outlined {
  font-weight: 500;
  font-family: Rubik;
  font-size: 16px;
  text-transform: none;
  margin-left: 3rem;
  border-radius: 20px;
  padding-left: 10px;
  padding-right: 10px;
}

<button class="outlined" size="small">Sign Up</button>

Answer 4

试试这个。在 border-radius

的大多数情况下，使用 px 而不是 % 是可行的

singup: {
    "&.MuiButton-outlinedPrimary": {
      fontWeight: 500,
      fontFamily: "Rubik",
      fontSize: "16px",
      textTransform: "none",
      marginLeft: "3rem",
      borderRadius: "32px",
      paddingLeft: "10px",
      paddingRight: "10px",
    },
  },

button {
      font-weight: 500;
      font-family: Rubik;
      font-size: 16px;
      text-transform: none;
      margin-left: 3rem;
      border-radius: 32px;
      border: 2px solid rgb(25, 118, 210);
      height: 42px;
      width: 100px;
      padding-left: 10px;
      padding-right: 10px;
    }

<button>Click Me</button>

轮廓按钮边框半径

Outlined Button Border Radius

css

button

border-layout

reactjs

material-ui