小圆圈在反应中显示为椭圆

Question

我想在反应中创建一个圆形的按钮。 它适用于大尺寸（px > 100），但对于较小的像素看起来像一个椭圆。

return (
<React.Fragment>
  <ThemeProvider theme={theme}>
    <Button style= {{  
      width:'10px',
      height:'10px',
      borderRadius:'50%',
      fontSize:'10px',
      color:'#fff',
      lineHeight:'50px',
      textAlign:'center',
      background:'#000'
      }} 
      variant="contained" color="secondary">
      {"Theme nesting"}
    </Button>
  </ThemeProvider>
</React.Fragment>
  );

看起来是这样的：

我知道 CSS 是正确的，那么导致这种行为的原因是什么？

Answer 1

还有其他 CSS styles 从 Material-UI 应用于Button （主要padding: 6px 16px; min-width: 64px ）

这将显示一个黑色圆圈：

<ThemeProvider theme={theme}>
  <Button 
    style={{  
      width: "10px",
      height: "10px",
      borderRadius: "50%",
      fontSize: "10px",
      color: "#fff",
      lineHeight: "50px",
      textAlign: "center",
      background: "#000",
      minWidth: "unset",
      padding: "0"
    }} 
    variant="contained" 
    color="secondary"
  >
    Theme nesting
  </Button>
</ThemeProvider>

也就是说，使用style属性的更好替代方法是使用其样式 API进行 CSS 覆盖（如makeStyles与主题）。