jd-opensource / jd-opensource/taro-ui
taro-ui 3.0.0 中 AtButton [圆角按钮] 和 [通栏按钮] 建议提供样式共存的功能
- Dominant language
- TypeScript
- Stars
- 4.7k
- Forks
- 740
- PR merge metrics
- No merged PRs in 30d
Description
**这个功能解决了什么问题?**
使用taro-ui3 的 AtButton时,按照如下方式设置通栏圆角按钮,
```tsx
按钮
```
发现包含 circle 和 full 属性的 AtButton 样式如下:
```css
.at-button--full {
width: 100%;
max-width: 100%;
border-radius: 0;
border-left: none;
border-right: none;
}
.at-button--circle {
border-radius: 46rpx; /* 这一行被覆盖掉了 */
background-clip: border-box;
overflow: hidden;
}
```
其中,由于css选择器优先级的问题, `border-radius : 0` 会覆盖掉circle按钮的 `border-radius:46rpx` 样式,从而导致圆角按钮和通栏按钮的样式不能共存。
**你期望的功能是怎样的?**
希望在按照上述 react 代码同时添加 full 和 circle属性时能够共存样式,即有一个圆角通栏按钮,如下图所示。这里的按钮是我自行修改的css样式。
**补充信息**
- taro-ui版本
3.0.0-alpha.10
- 补充图片

Contributor guide
Assessment
This issue has not been assessed yet.