Staying in React-Tag-Eingang

Question

Ich verwende "React-Tag-Eingang" react-tag-input.

aber nicht finden können, wie zu tun Styling reagieren-tag-Eingang

mein Code sieht wie folgt aus

 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> 

ich für Styling-Suche in ReactTags

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

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

Can Sie führen mich, wie man das Styling in diesem ??

Answer 1

Sie können CSS verwenden. Von :

<ReactTags> kommt nicht mit jedem Stil. Es ist jedoch sehr einfach, das Aussehen der Komponente so anzupassen, wie Sie es möchten. Standardmäßig bietet die Komponente die folgenden Klassen, mit dem Sie Stil -

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

Also, wenn Sie den Hintergrund eines Tags ändern möchten, können Sie so etwas wie dies in Ihrem CSS tun:

.ReactTags__tag { 
    background-color: red; 
}