react antd动态样式实现

最新推荐文章于 2026-08-02 15:27:22 发布

原创最新推荐文章于 2026-08-02 15:27:22 发布 · 526 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

当前文章被以下社区和专栏收录：

文章讲述了在前端开发中，如何使用动态样式来处理<a>组件的背景颜色和内边距，特别是在变量为null或空时的场景。通过示例代码展示了不使用动态样式和使用动态样式时的区别，强调了动态样式的灵活性。

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