How to put border bottom to react-chips in reactjs? - reactjs

Question

I'm new to react and I have created a modal and used react-chips for showing suggestions, but I wasn't able to change the field styling the same way I changed it for the subject input field. I've tried styling but I'm unable to change the styling of the react-chip.
Here is the code:
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
chips: []
};
}
onChange = chips => {
this.setState({ chips });
};
render() {
return (
<Container>
<Modal trigger={<Button>Show Modal</Button>}>
<Modal.Content>
<Form>
<strong>Email</strong>
<Chips
className="f_input"
value={this.state.chips}
onChange={this.onChange}
suggestions={["Your", "Data", "Here"]}
/>
<Form.Field
transparent
className="f_input"
control={Input}
label="Subject"
/>
<TextArea placeholder="Email Format" />
</Form>
<Button>Send</Button>
</Modal.Content>
</Modal>
</Container>
);
}
}
Here is the Code: https://codesandbox.io/s/boring-yalow-sx678
Can anyone help me in this query?

Answer 1

The library encourages styling the chips using the chipTheme prop;
Here is for example how you can add some custom styling to the chips in the example you provided:
<Chips
className="f_input"
value={this.state.chips}
onChange={this.onChange}
suggestions={["Your", "Data", "Here"]}
chipTheme={{
chip: {
color: "white",
background: "blue",
borderRadius: 20
},
chipRemove: {
fontWeight: "bold",
cursor: "pointer",
color: "green",
":hover": {
color: "yellow"
}
}
}}
/>
UPDATE
In case you would like to style the chips-container and input you should use the theme prop.
In your case you should override the chipsContainer style with the following properties in order to get an underline similar to the one you have on the "subject" input :
border: "none",
borderBottom: "1px solid black",
marginBottom: 14,
Here is your forked sandbox with the solution.
And here is a reference to the default theme objects which you can override.