css - 代码技巧

1. :not()

&.is-active:not(.is-hidden) {
    transform: translateY(-6px);
    box-shadow: 0 8px 12px rgba(0, 0, 0, 0.2);
}

2. 修改antd 的样式

  :global {
    .ant-affix {
      z-index: 100 !important;
    }
  }

3. 表格长度控制

  .col {
    // word-wrap: "break-word";
    // word-break: "break-word";
    max-width: 10vw;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

<div className={styles.col} title={text}>
    {text}
</div>

4. 选取父元素下面的第一个div元素

    & div:first-child {
      display: flex;
      align-items: center;
    }

5. 调整antd样式

.baseSetting :global(.ant-form) {
  :global {
    .ant-form-item-label {
      width: 90px;
    }

    .ant-form-item {
      margin-bottom: 24px;
    }
  }
}

6. 使用classname - 1

 className={cs(styles.itemBorder, {
                [styles.itemBorderChecked]: rule?.find(
                  (ruleItem) => ruleItem.id === item.id
                ),
              })}

7. 使用classname - 2

 className={classnames({ FBH: useSearch })}>