React中使用Tagify为tagify__input添加自定义类名方法咨询

直接通过Tagify实例操作输入框元素 #

每个Tagify实例初始化完成后，可通过DOM.input属性获取对应的tagify__input span元素，直接为其添加自定义类名来区分不同实例的输入框。

代码示例 #

import Tagify from '@yaireo/tagify';
import { useRef, useEffect } from 'react';

function TagifyComponent() {
  // 保存两个Tagify实例的引用
  const tagifyInstance1 = useRef(null);
  const tagifyInstance2 = useRef(null);

  useEffect(() => {
    // 初始化第一个实例
    const inputEl1 = document.getElementById('tag-input-1');
    tagifyInstance1.current = new Tagify(inputEl1, {
      maxTags: 5
    });
    // 给第一个实例的输入框添加自定义类
    tagifyInstance1.current.DOM.input.classList.add('tag-input-custom-1');

    // 初始化第二个实例
    const inputEl2 = document.getElementById('tag-input-2');
    tagifyInstance2.current = new Tagify(inputEl2, {
      maxTags: 3
    });
    // 给第二个实例的输入框添加自定义类
    tagifyInstance2.current.DOM.input.classList.add('tag-input-custom-2');

    // 组件卸载时销毁实例
    return () => {
      tagifyInstance1.current?.destroy();
      tagifyInstance2.current?.destroy();
    };
  }, []);

  return (
    <div className="tagify-container">
      <input id="tag-input-1" placeholder="请输入标签1" />
      <input id="tag-input-2" placeholder="请输入标签2" />
    </div>
  );
}

export default TagifyComponent;

对应样式 #

/* 第一个Tagify输入框的样式 */
.tag-input-custom-1 {
  border-color: #2563eb;
  padding: 6px 10px;
  font-size: 14px;
}

/* 第二个Tagify输入框的样式 */
.tag-input-custom-2 {
  border-color: #dc2626;
  padding: 8px 12px;
  font-size: 16px;
}

备选方案：通过根容器类名间接定位 #

若不想直接操作输入框元素，也可以给每个Tagify实例的根容器（DOM.wrapper）添加自定义类，再通过后代选择器定位tagify__input：

// 初始化时给根容器加类
tagifyInstance1.current.DOM.wrapper.classList.add('tagify-wrapper-1');

.tagify-wrapper-1 .tagify__input {
  border-color: #2563eb;
  padding: 6px 10px;
}

内容的提问来源于stack exchange，提问作者Niros_