Javascript React标签输入中的Stying

我使用的是“反应标签输入”

但是找不到如何对react标记输入进行样式化

我的代码如下所示

      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>

从'react tag input'导入{WithContext as react tags}；
const App=React.createClass({
getInitialState（）{
返回{
标签：[]，
建议：[]
}
},
Handledelite（一）{
让tags=this.state.tags；
拼接标签（i，1）；
this.setState（{tags:tags}）；
},
手持设备（标签）{
让tags=this.state.tags；
标签。推({
id:tags.length+1，
文本：标记
});
this.setState（{tags:tags}）；
},
手抹布（标签、currPos、newPos）{
让tags=this.state.tags；
拼接标签（currPos，1）；
标签。拼接（新位置，0，标签）；
this.setState（{tags:tags}）；
},
render（）{
让tags=this.state.tags；
让建议=this.state.suggestions；
返回(

我正在寻找的标签样式

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

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

)
}
});
ReactDOM.render（，document.getElementById（'app'））；

你能指导我，如何在这方面做造型吗？？？

你可以使用CSS。发件人：

没有任何样式。但是，定制组件的外观是非常容易的。默认情况下，该组件提供以下类，您可以使用这些类设置样式-

• 反应标记\uuuu标记
• 反应标记\uuuu标记输入
• ReactTags\uUu tagInputField
• 已选择“反应标记”
• ReactTags\uuuu所选ReactTags\uuuu标签
• ReactTags\选定ReactTags\移除
• 回应建议

因此，如果要更改标记的背景，可以在CSS中执行以下操作：

.ReactTags__tag {
  background-color: red;
}

---

嗨，欢迎来到StackOverflow！在编写答案时，它对阅读您答案的人非常有用，因为您不仅提供了解决问题的代码，而且还解释了代码的作用。否则，不熟悉相关技术的人将很难理解您的代码为什么会这样做，并根据自己的需要对其进行修改。谢谢您的宝贵信息。

/* Example Styles for React Tags*/
#app {
  padding: 40px;
}

div.ReactTags__tags {
    position: relative;
}

/* Styles for the input */
div.ReactTags__tagInput {
    width: 200px;
    border-radius: 2px;
    display: inline-block;
}
div.ReactTags__tagInput input.ReactTags__tagInputField,
div.ReactTags__tagInput input.ReactTags__tagInputField:focus {
    height: 31px;
    margin: 0;
    font-size: 12px;
    width: 100%;
    border: 1px solid #eee;
    padding: 0 4px;
}

/* Styles for selected tags */
div.ReactTags__selected span.ReactTags__tag {
    border: 1px solid #ddd;
    background: #eee;
    font-size: 13px;
    display: inline-block;
    padding: 6px;
    margin: 0 5px 5px 5px;
    cursor: default !important;
    border-radius: 2px;
}
div.ReactTags__selected a.ReactTags__remove {
    color: #9c9c9c;
    margin-left: 5px;
    cursor: pointer;
}

/* Styles for suggestions */
div.ReactTags__suggestions {
    position: absolute;
    color: #000 !important;
    font-weight: normal !important;
    font-size: 14px !important;
}
div.ReactTags__suggestions ul {
    list-style-type: none;
    box-shadow: .05em .01em .5em rgba(0,0,0,.2);
    background: white;
    width: 200px;
}
div.ReactTags__suggestions li {
    border-bottom: 1px solid #ddd;
    padding: 15px 10px;
    margin: 0;
}
div.ReactTags__suggestions li mark {
    text-decoration: underline;
    background: none;
    font-weight: 600;
}
div.ReactTags__suggestions ul li.ReactTags__activeSuggestion {
    background: #b7cfe0;
    cursor: pointer;
}