<Row>
<Col style={{ marginBottom: '30px' }} >
<a className="labelstyle" style={{ padding: fundType.length < 1 ? '0px' : '5px', marginRight: fundType.length < 1 ? '0px' : '10px' }} >{fundType}</a>
<a className="labelstyle" style={{ padding: orderSellerType.length < 1 ? '0px' : '5px', marginRight: orderSellerType.length < 1 ? '0px' : '10px' }} >{orderSellerType}</a>
</Col>
</Row>使用<a>组件的背景：
想给业务流量加标签，使用动态样式后最终实现如下：
如果不使用动态样式时：
<Row>
<Col style={{ marginBottom: '30px' }} >
<a className="labelstyle">{fundType}</a>
<a className="labelstyle">{orderSellerType}</a>
</Col>
</Row>:global {
.labelstyle{
color: white;
background-color: #1890ff;
margin-bottom: 30px;
border-radius:10%;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
}当<a>组件展示的变量为null或者空时，页面样式如下：
文章来源：https://www.toymoban.com/news/detail-505972.html
文章来源地址https://www.toymoban.com/news/detail-505972.html
到了这里，关于react antd动态样式实现的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
