react antd动态样式实现

<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或者空时，页面样式如下：