css - 如何修改 reactjs-dropdown-component 的 css？

Question

目标

我需要修改 reactjs-dropdown-component 的 CSS。

背景/概述

我已经下载了下拉列表，将其导入，并让它在 React 中完全运行。但是，我对编码还很陌生，还没有遇到过需要对下载的组件进行重要样式设置的情况。我是否只是为它重新创建样式表并导入它？

此组件的 css 位于此 Github 存储库中:https://github.com/dbilgili/Custom-ReactJS-Dropdown-Components/blob/master/src/styles/stylus/dropdown.styl

我下载/使用此下拉菜单所遵循的说明位于此处:https://github.com/dbilgili/Custom-ReactJS-Dropdown-Components

我不确定是否有必要，但这是我使用下拉菜单的代码

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;

Answer 1

在文档中，他们已经说过了:

Refer to the following styling file for overriding the default styles. You can create your own styling file with the same class names in order to do your custom styling.

因此，您必须使用类创建您的 css 文件并覆盖您想要的类。