当前位置：首页 > news >正文

react覆盖组件样式，不影响其他地方相同类名的组件

news 来源：原创 2025/6/15 15:53:14

less module 配合 :global(){}

less文件

/* ButtonComponent.less */
.customButton {
  // 覆盖第三方按钮库的类名（如 .ant-btn）
  :global(.ant-btn) {
    background: #1890ff;
    // 通过父选择器限定作用域
    &:hover {
      background: #40a9ff;
    }
  }
}

tsx文件

// ButtonComponent.jsx
import styles from './ButtonComponent.less';

export default () => (
  <button className={styles.customButton}>仅影响此按钮</button>
);

less多个类名需要修改时

.antd-override { // 父容器隔离作用域
  :global {
    // 批量修改表格相关样式
    .ant-table {
      border: 1px solid #e8e8e8;
      
      &-thead > tr > th {
        background: #fafafa;
      }
      
      &-tbody > tr:hover > td {
        background: #f5f5f5 !important;
      }
    }

    // 批量修改按钮相关样式
    .ant-btn {
      border-radius: 4px;
      
      &-primary {
        background: #1890ff;
      }
    }
  }
}