如何修改按钮边框颜色？borderColor设置无效问题求助

只设置borderColor不会显示边框，因为CSS默认borderStyle为none、borderWidth为0，这两个属性不配置的话，边框不会被渲染。

解决方案1：补充边框宽度与样式 #

在headerBtn样式中添加borderWidth和borderStyle属性：

headerBtn: {
    backgroundColor: 'black',
    fontSize: '16px',
    fontWeight: 'bold',
    letterSpacing: '-0.16px',
    borderRadius: '20px',
    borderColor: '#FFFFFF',
    borderWidth: '1px', /* 新增：设置边框宽度 */
    borderStyle: 'solid', /* 新增：设置边框样式 */
    color: '#ffffff',
    padding: '6.5px 24px',
    display: ['none', null, null, null, 'inline-block'],
    ml: ['0', null, null, 'auto', '0'],
    mr: ['0', null, null, '20px', '0'],
    '&:hover': {
      color: '#000000',
      backgroundColor: '#FFFFFF', /* 可选：hover时背景变白，和文字颜色适配 */
    },
  }

解决方案2：使用border简写属性 #

直接通过border属性一次性配置宽度、样式和颜色，写法更简洁：

headerBtn: {
    backgroundColor: 'black',
    fontSize: '16px',
    fontWeight: 'bold',
    letterSpacing: '-0.16px',
    borderRadius: '20px',
    border: '1px solid #FFFFFF', /* 替换单独的borderColor */
    color: '#ffffff',
    padding: '6.5px 24px',
    display: ['none', null, null, null, 'inline-block'],
    ml: ['0', null, null, 'auto', '0'],
    mr: ['0', null, null, '20px', '0'],
    '&:hover': {
      color: '#000000',
      backgroundColor: '#FFFFFF',
      borderColor: '#000000', /* 可选：hover时边框变黑，匹配文字颜色 */
    },
  }

完成以上设置后，按钮的白色边框就能正常显示，达到预期效果。

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