如何修改reactjs下拉组件的css？

目标

我需要修改reactjs下拉组件的CSS

背景/概述

我已经下载了下拉列表，导入了它，并在react中完全运行了它。然而，我对编码还相当陌生，还没有遇到过需要对下载的组件进行重大样式设计的情况。我只是为它重新创建样式表并导入它吗

此组件的css位于此Github repo中：

以下是我下载/使用此下拉列表的说明：

我不确定是否有必要，但下面是我使用下拉列表的代码

import React from 'react';
import './EventContainer.css';
import { Dropdown } from 'reactjs-dropdown-component';
import { dining } from './EventContainerIcons.js';

class EventContainer extends React.Component {
  constructor(props){
    super(props);
    this.state =  {
      ...props.event,
      activityIcon: [
          {
            id: 0,
            title: <img src={dining} width="64" height="64" alt="dining icon" />,
            selected: false,
            key: 'activityIcon'
          },
          {
            id: 1,
            title: 'Orange',
            selected: false,
            key: 'activityIcon'
          },
          {
            id: 2,
            title: 'Strawberry',
            selected: false,
            key: 'activityIcon'
          }
        ],
    };
  }

  handleTypeChange = (e) => {
    this.setState({
      type: e.target.value
    })
  }

  handleTimeChange = (e) => {
    this.setState({
      time: e.target.value
    })
  }

  handleSummaryChange = (e) => {
    this.setState({
      summary: e.target.value
    })
  }

  handleNotesChange = (e) => {
    this.setState({
      notes: e.target.value
    })
  }

  resetThenSet = (id, key) => {
  let temp = this.state[key];
  temp.forEach(item => (item.selected = false));
  temp[id].selected = true;
  this.setState({
    [key]: temp
  });
};

  render(){
    return (
      <div className="eventContainer-flex">
        <Dropdown
          title="Event Type"
          list={this.state.activityIcon}
          resetThenSet={this.resetThenSet}
        />
        <div>
          <input
            className="time-input-styling"
            type="time"
            value={this.state.time}
            onChange={this.handleTimeChange}/>
        </div>
        <div>
          <textarea
            className="textarea-styling"
            /*placeholder="Write summary here"*/
            value={this.state.summary}
            onChange={this.handleSummaryChange}
            cols={60}
            rows={3} />
        </div>
        <div>
          <textarea
            className="textarea-styling"
            /*placeholder="Write notes here"*/
            value={this.state.notes}
            onChange={this.handleNotesChange}
            cols={30}
            rows={3} />
          </div>
      </div>
    )
  }
}

export default EventContainer;

从“React”导入React；
导入“/EventContainer.css”；
从“reactjs下拉组件”导入{Dropdown}；
从'./eventContainerCons.js'导入{dining}；
类EventContainer扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
…道具事件，
活动图标：[
{
id:0，
标题：，
选择：false，
键：“活动图标”
},
{
id:1，
标题:"橙色",，
选择：false，
键：“活动图标”
},
{
id:2，
标题：“草莓”，
选择：false，
键：“活动图标”
}
],
};
}
handleTypeChange=（e）=>{
这是我的国家({
类型：e.target.value
})
}
手动机械位=（e）=>{
这是我的国家({
时间：即目标值
})
}
handleSummaryChange=（e）=>{
这是我的国家({
总结：e.target.value
})
}
handleNotesChange=（e）=>{
这是我的国家({
注：e.target.value
})
}
resetThenSet=（id，键）=>{
设temp=this.state[key]；
临时forEach（item=>（item.selected=false））；
温度[id]。所选值=真；
这是我的国家({
[键]：温度
});
};
render（）{
返回(
)
}
}
导出默认事件容器；

在文档中，他们曾经说过：

有关替代默认样式的信息，请参考以下样式文件。 您可以在中使用相同的类名创建自己的样式文件 以进行自定义样式设置

---

因此，您必须创建css文件，其中包含所需的类，并覆盖所需的类。

谢谢，很抱歉提出这个新问题。这个思考过程对我来说并不直观，因为我本以为需要将css标记直接添加到组件的HTML标记中。放松，但尝试这种方式，如果没有解决，请回到这里。我没有成功。我从repo中重新创建了css，并将其导入到js文件中。我尝试过添加类名并对css文档进行调整，但什么也没发生。