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; 
}