能否为Raised Button设置border-radius？自定义样式设置后无效

嘿，我碰到过类似的情况，来帮你排查几个最常见的原因：

1. 先确认元素的 display 类型 #

如果你的按钮是 display: inline 元素，height 和 border-radius 这类属性经常会出现预期外的表现——毕竟 inline 元素默认不支持自定义高度，圆角也可能被外部布局“吃掉”。给按钮加上 display: 'inline-block' 或者 display: 'block' 试试：

const styles = {
  btn: {
    height: 30,
    fontSize: 11,
    borderRadius: 50,
    display: 'inline-block' // 补上这个属性
  }
}

2. 检查是否被更高优先级的样式覆盖 #

打开浏览器开发者工具（F12）选中按钮，看「Styles」面板里的 border-radius 是否被划掉了。如果是，说明有全局CSS、组件库自带样式或者其他类选择器的优先级更高，把你的内联样式覆盖了。

这种情况可以试试：

• 给 borderRadius 加上明确单位：borderRadius: '50px'（虽然React内联样式里数字默认是px，但某些场景下明确单位能解决兼容性问题）
• 如果用了UI组件库（比如AntD、Material UI），建议用组件自带的样式API（比如MUI的sx属性），比纯内联样式更适配组件自身的样式体系

3. 排查 overflow 或 clip 类属性冲突 #

如果按钮自身或父元素设置了 overflow: visible 以外的属性，或者有 clip-path 规则，可能会把圆角效果遮挡住。去开发者工具里检查下这些属性，看看是不是冲突了。

4. 特殊场景：伪元素或原生控件问题 #

如果你的按钮是用伪元素（::before/::after）生成的视觉效果，或者是<input type="button">这类原生控件，内联样式可能无法直接作用到视觉上的按钮部分。这时候需要针对伪元素或者原生控件的专属样式进行调整。

最后给你一个能正常生效的测试示例，你可以对比下自己的代码：

function TestButton() {
  const styles = {
    btn: {
      height: 30,
      fontSize: 11,
      borderRadius: 50,
      display: 'inline-block',
      padding: '0 20px',
      border: 'none',
      backgroundColor: '#2563eb',
      color: 'white'
    }
  };

  return <button style={styles.btn}>测试圆角按钮</button>;
}

内容的提问来源于stack exchange，提问作者kurniawan26