Search code examples
cssreactjsreactstrap

How can I apply custom styles on a reactstrap input?

If someone have experience with reactstrap and can help me with a problem: I have a reactstrap Input component and I want to apply "border: none" in styles.scss. In their documentation I don't see the Input component and what props can take. I don't know if I can apply border: none from its props. So far I've tried in styles.scss:

.form-control {
  border: none;
}

or

#name.form-control {
  border: none;
}

or by applying a className={styles.inputName} prop on Input component and trying to apply css properties mentioned above. None of these worked so far. Thank you.

Solution

  • Frameworks like Reactstrap or React Bootstrap come with a CSS file you import. It's a huge file that has all the properties you need. All you do is apply class names to your React components as in className={"classname1 classname2 ..."}.

    So for borders, here is the doc: https://mdbootstrap.com/docs/react/utilities/borders/ From that doc you can see, for example, that you can remove just the top border by applying this class name border-top-0. And there is a class name for just about every imaginable properly e.g. display, margin, padding, width, height etc.