Stact in React-tag-input

Question

我正在使用“React-tag-input”react-tag-input。

，但无法找到如何做到反应标签输入的造型

我的代码看起来像这样

 import { WithContext as ReactTags } from 'react-tag-input'; 

    const App = React.createClass({ 
     getInitialState() { 
     return { 
     tags: [], 
     suggestions: [] 
     } 
     }, 

handleDelete(i) { 
     let tags = this.state.tags; 
     tags.splice(i, 1); 
     this.setState({tags: tags}); 
    }, 

handleAddition(tag) { 
    let tags = this.state.tags; 
    tags.push({ 
     id: tags.length + 1, 
     text: tag 
    }); 
    this.setState({tags: tags}); 
}, 

handleDrag(tag, currPos, newPos) { 
    let tags = this.state.tags; 
    tags.splice(currPos, 1); 
    tags.splice(newPos, 0, tag); 
    this.setState({ tags: tags }); 
}, 


render() { 
    let tags = this.state.tags; 
    let suggestions = this.state.suggestions; 
    return (
     <div> 

我在ReactTags寻找造型

   <ReactTags tags={tags} 
       suggestions={suggestions} 
       handleDelete={this.handleDelete} 
       handleAddition={this.handleAddition} 
       handleDrag={this.handleDrag} /> 
     </div> 
     ) 
    } 
}); 

    ReactDOM.render(<App />, document.getElementById('app')); 

灿你指导我，如何在这样做造型？

Answer 1

您可以使用CSS。从the documentation：

<ReactTags>没有拿出任何样式。但是，按照需要自定义组件的外观很容易。默认情况下，该组件提供下列类使用它你可以风格 -

• ReactTags__tags
• ReactTags__tagInput
• ReactTags__tagInputField
• ReactTags__selected
• ReactTags__selected ReactTags__tag
• ReactTags__selected ReactTags__remove
• ReactTags__suggestions

所以，如果你想改变标签的背景，你可以做这样的事情在你的CSS：

.ReactTags__tag { 
    background-color: red; 
}