jd-opensource / jd-opensource/taro-ui

taro-ui 3.0.0 中 AtButton [圆角按钮] 和 [通栏按钮] 建议提供样式共存的功能

Open
#1,363 1 comment 0 reactions 0 assignees View on GitHub
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
- 补充图片

![image](https://user-images.githubusercontent.com/55703989/123240834-3da12d00-d513-11eb-8282-e70990b1f66d.png)

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.