Css 小圆在图中显示为椭圆

我想在react中创建一个圆形按钮。它适用于大尺寸（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是正确的，那么是什么导致了这种行为？

还有其他CSS样式被应用到材质UI中的

按钮上（主要是
填充：6px 16px；
和
最小宽度：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>


主题嵌套

这就是说，使用
样式
属性的更好的替代方法是将其用于CSS覆盖（如主题化）。
还有其他CSS样式从材质UI应用到
按钮
（主要是
填充：6px 16px；
和
最小宽度：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
属性的更好替代方法是将其用于CSS覆盖（如主题化）。
您必须向我们展示正在应用的其他样式。我猜是一个按钮宽度。这实际上是一个CSS和HTML问题，应该这样处理。没有应用其他样式，删除该提供程序会得到相同的结果右键单击->检查->查找计算样式中的覆盖CSS。正如isherwood指出的，第一个猜测可能是材质，或者某个元素具有类似于
按钮{width:123px！important}
的元素选择器，或者您必须向我们展示正在应用的其他样式。我猜是一个按钮宽度。这实际上是一个CSS和HTML问题，应该这样处理。没有应用其他样式，删除该提供程序会得到相同的结果右键单击->检查->查找计算样式中的覆盖CSS。正如伊舍伍德指出的，第一个猜测可能是材质或某个元素选择器带有类似的
按钮{width:123px！important}
或其他内容