How to modify the css for reactjs-dropdown-component? - css

Question

Goal
I need to modify the CSS for the reactjs-dropdown-component.
Background/Overview
I've downloaded the dropdown, imported it, and have it fully operational in react. However, I'm fairly new to coding and haven't yet been in a situation where I need to do significant styling to a downloaded component. Do I just recreate the stylesheet for it and import it?
The css for this component is in this Github repo: https://github.com/dbilgili/Custom-ReactJS-Dropdown-Components/blob/master/src/styles/stylus/dropdown.styl
The instructions I followed for downloading/using this dropdown are here: https://github.com/dbilgili/Custom-ReactJS-Dropdown-Components
I'm not sure that it's necessary but here is code where I'm using the dropdown
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

In the documentation, they alreayd said it:
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.
So, you have to create your css file, with the classes and override the classes you want.